layer弹出层详解
前言：学习layer弹出框，之前项目是用bootstrap模态框，后来改用layer弹出框，在文章的后面，我会分享项目的一些代码(我自己写的)。
layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这五年多的坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力。目前，layer已成为国内最多人使用的web弹层组件，GitHub自然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在使用layer。 具体请移步layer官网，http://www.layui.com/doc/modules/layer.html
这篇博客会引用官网的一些内容，主要是写写layer的一些难点。比如如何用layer打开一个新的网页，content直接为一个网址就可以了，但是在你的项目中，这个网址又是啥??HTML的直接路径? 相对路径??都不是!! layer如何获取父界面的元素，比如我点击新增按钮，在layer框编辑后提交，是如何关闭当前layer框，额，关闭layer框很简单，但是如何关闭后根据父界面的form表单向后台发起Ajax请求，，刷新信息。即：layer子界面如何调用父界面的方法。
如果你不想使用Layui，而只是想使用layer，你可以去layer独立组件官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。
<script src="jQuery的路径"></script>
<script src="layer.js的路径"></script>
<script>
//弹出一个页面层
$(\'#test2\').on(\'click\', function(){
layer.open({
type: 1,
area: [\'600px\', \'360px\'],
shadeClose: true, //点击遮罩关闭
content: \'\<\div style="padding:20px;">自定义内容\<\/div>\'
});
});
</script>
title – 标题
类型：String/Array/Boolean，默认：\’信息\’
title支持三种类型的值，若你传入的是普通的字符串，如title :\’我是标题\’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: [\’文本\’, \’font-size:18px;\’]，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
content – 内容
类型：String/DOM/Array，默认：\’\’
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
/!*
如果是页面层
*/
layer.open({
type: 1,
content: \'传入任意的文本或html\' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $(\'#id\') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post(\'url\', {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: \'http://sentsin.com\' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [\'http://sentsin.com\', \'no\']
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: [\'内容\', \'#id\'] //数组第二项即吸附元素选择器或者DOM
});
btn – 按钮
类型：String/Array，默认：\’确认\’
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: \’我知道了\’，当你要定义两个按钮时，你可以btn: [\’yes\’, \’no\’]。当然，你也可以定义更多按钮，比如：btn: [\’按钮1\’, \’按钮2\’, \’按钮3\’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：
1 //eg1 2 layer.confirm(\'纳尼？\', { 3 btn: [\'按钮一\', \'按钮二\', \'按钮三\'] //可以无限个按钮 4 ,btn3: function(index, layero){ 5 //按钮【按钮三】的回调 6 } 7 }, function(index, layero){ 8 //按钮【按钮一】的回调 9 }, function(index){ 10 //按钮【按钮二】的回调 11 }); 12 13 //eg2 14 layer.open({ 15 content: \'test\' 16 ,btn: [\'按钮一\', \'按钮二\', \'按钮三\'] 17 ,yes: function(index, layero){ 18 //按钮【按钮一】的回调 19 } 20 ,btn2: function(index, layero){ 21 //按钮【按钮二】的回调 22 23 //return false 开启该代码可禁止点击该按钮关闭 24 } 25 ,btn3: function(index, layero){ 26 //按钮【按钮三】的回调 27 28 //return false 开启该代码可禁止点击该按钮关闭 29 } 30 ,cancel: function(){ 31 //右上角关闭回调 32 33 //return false 开启该代码可禁止点击该按钮关闭 34 } 35 });
View Code
success – 层弹出后的成功回调方法
类型：Function，默认：null
当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。如：
layer.open({
content: \'测试回调\',
success: function(layero, index){
console.log(layero, index);
}
});
yes – 确定按钮回调方法
类型：Function，默认：null
该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：
layer.open({
content: \'测试回调\',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
});
cancel – 右上角关闭按钮触发的回调
类型：Function，默认：null
该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可，如；
cancel: function(index, layero){
if(confirm(\'确定要关闭么\')){ //只有当点击confirm框的确定时，该层才会关闭
layer.close(index)
}
return false;
}
end – 层销毁后触发的回调
类型：Function，默认：null
无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
layer.ready(callback) – 初始化就绪
由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：
//页面一打开就执行弹层 layer.ready(function(){ layer.msg(\'很高兴一开场就见到你\'); });
layer.close(index) – 关闭特定层(比较重要)
关于它似乎没有太多介绍的必要，唯一让你疑惑的，可能就是这个index了吧。事实上它非常容易得到。
//当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的，每一种弹层调用方式，都会返回一个index layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可 //如果你想关闭最新弹出的层，直接获取layer.index即可 layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的 //当你在iframe页面关闭自身时 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭
layer.getChildFrame(selector, index) – 获取iframe页的DOM
当你试图在当前页获取iframe页的DOM元素时，你可以用此方法。selector即iframe页的选择器
1 layer.open({
2 type: 2,
3 content: \'test/iframe.html\',
4 success: function(layero, index){
5 var body = layer.getChildFrame(\'body\', index);
6 var iframeWin = window[layero.find(\'iframe\')[0][\'name\']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
7 console.log(body.html()) //得到iframe页的body内容
8 body.find(\'input\').val(\'Hi，我是从父页来的\')
9 }
10 });
11
layer.getFrameIndex(windowName) – 获取特定iframe层的索引
此方法一般用于在iframe页关闭自身时用到。
//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
封装好的Layer弹出框与关闭layer弹出框的方法(代码周一给出, 现在手头没有代码)：