Layer 弹层插件注意事项

layer 弹层是一个很简洁，很好看的弹层插件。

前言

近几天项目里使用了layer弹层，初次使用有些生疏，在使用过程中遇到了很多问题，查阅官方api，总是碰到一些问题，感觉官方api在某些细节上叙述的不是特别清楚。特此在我使用中某些细节问题做一下说明。

layer类型

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。

为什么会划分这么多种类型，个人理解，这么多种类型其实是为了应对不同的应用场景。比如提示框，那你就用msg来写就行了，没别要用一个页面层什么的。诸如此类简单的，不在赘述。在这里重点说一下页面层，iframe层和tips层的区别和应用场景。

页面层

页面层conten里放的内容是要加载到当前页面的东西。可以是html的字符串也可以示DOM对象。如果是自己写的html字符串，没有影响。但如果是DOM对象，需注意官方api里有一句话:

layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});

在我看来，不是最好放在body外面，而是必须放在外面。因为页面层会加载弹层内容到当前页面上，如果不在body外，那岂不是有两个id一样的内容加载了！
另外放在body外还得设置隐藏哦，一般根据习惯会用一个div来包着弹层的内容。加载时也是加载div。

重点

加载的弹层在当前页面上，所以在当前页的js里获取弹层内容操作是很方便的。

应用场景

适合直接弹出静态页面，不需要在弹出之前跟后台交

iframe层

iframe层的content是一个请求，通过后台返回的页面来填充弹层内容。

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 

重点

加载的弹层不在当前页面上，所以在当前页的js里获取弹层内容操作是很不方便的。
本人尝试通过js来获取是可以得，先获得iframe对象进而获取你想要的东西，很麻烦。
也许在有些人看来不麻烦，但真要这样做其实是跟layer的初心简单简洁，背道而驰了。

应用场景

适合需要后台交互返回的页面往往有后台的参数或者数据加载。

tips层

tips层其实是一种类似msg一样的小提醒。我理解官方的意思就是让它作为一种小提醒去使用的。

重点

content里放的只能是html的字符串。如果强行想放DOM对象，需要$(“#id”).html().否则弹层内容会出现[object，object]
由于内容是静态的html标签，所以如果需要展示后台交互的动态内容怎么办？
先考虑用iframe，如果业务非得要这么做，那可以在弹层之前，先得到交互之后的动态页面，然后把交互之后的页面的html字符串放到tips的content里。

应用场景

适合需要贴着某个控件显示弹层