了解图层弹出框。在这个项目之前，使用了bootstrap模型盒。后来使用了图层弹出框。在文章的后面，我会分享一些项目的代码。有需要的朋友可以参考一下。

前言：学习图层弹出框。项目之前用的是bootstrap模态框，后期用的是图层弹出框。文末我会分享一些项目的代码(自己写的)。

时至今日，《层》依然是拉伊的代表作。她的受众广不是偶然的，而是这五年的坚持，不断的完善和维护，不断的建设和推广社区服务，让猿自发的传播开来，甚至成为了今天拉易最强的源头。目前，layer已经成为国内应用最广泛的Web层组件。GitHub Natural Stars3000在官网累计下载量30w，约20万web平台在使用Layer。请移至层，http://www.layui.com/doc/modules/layer.html,官方网站

本博客会引用官网的一些内容，主要是关于写层的一些难点。比如如何用图层打开一个新的网页，内容可以直接是一个URL，但是这个URL在你的项目里是什么？是HTML的直接路径吗？相对路径？都不是！如何获取父界面的元素，比如我编辑图层框后点击添加按钮提交，如何关闭当前图层框？嗯，关闭层盒很简单，但是关闭后如何根据父界面的表单形式向后台发起一个Ajax请求，刷新信息。也就是层子接口如何调用父接口的方法。

如果不想用Layui，只想用layer，可以去layer独立组件官网下载组件包。你需要在你的页面中引入1.8以上的任何版本的jQuery1.8，引入layer.js

script=' jquery的路径'/script

script=' layer . js的路径'/script

脚本

//弹出页面图层

$('#test2 ')。on('click '，function(){

layer.open({

类型：1，

面积：[' 600像素'，' 360像素']，

ShadeClose: true，//单击遮罩将其关闭。

content:' \ \ div style=' padding:20px；自定义内容\\/div '

});

});

/脚本

title - 标题

类型：字符串/数组/布尔值，默认：“信息”

标题支持三种类型的值。如果传入一个普通的字符串，比如title:'我就是标题'，只会改变标题文本；如果您仍然需要自定义标题区域的样式，那么您可以标题：['text '，' font-size:18px；']，数组的第二项可以写成任何css样式；如果不想显示标题栏，可以title: false。

content - 内容

类型：字符串/DOM/数组，默认值：“”

内容可以传入的值是灵活的，不仅可以传入普通的html内容，还可以指定DOM，不同的类型可以不同。例如：

/!*

如果是页面层

*/

layer.open({

类型：1，

内容：'传入任何文本或html' //这里的内容是一个普通的字符串

});

layer.open({

类型：1，

Content: $('#id') //在这里，Content是一个DOM。注意：这个元素最好存放在正文的最外层，否则可能会受到其他相对元素的影响。

});

//Ajax get

$.post('url '，{}，function(str){

layer.open({

类型：1，

Content: str //注意，如果str是object，那么就需要进行字符拼接。

});

});

/!*

如果它是iframe层

*/

layer.open({

类型：2，

content:' 3358 sentsin . com '//这里的内容是一个URL。如果您不希望滚动条出现在iframe中，您也可以满足：['3358sentsin.com '，' no']

});

/!*

如果使用layer.open执行tips图层

*/

layer.open({

类型：4，

Content: ['content '，' #id'] //数组的第二项是捕捉元素选择器或DOM

});

btn - 按钮

类型：字符串/数组，默认：“确认”

在信息框模式下，btn默认为确认按钮，其他图层类型默认不显示，加载图层和提示图层无效。当你只想自定义一个按钮时，可以btn:'我看到了'，当你想定义两个按钮时，可以btn: ['是'，'否']。当然你也可以定义更多的按钮，比如：btn: ['按钮1 '，'按钮2 '，'按钮3 '，…]。按钮1的回调是yes，从按钮2开始回调是btn2: function(){}，以此类推。比如：

//eg1

Layer.confirm('纳尼？ {

Btn: ['按钮一'，'按钮二'，'按钮三']//可以有无限个按钮。

，btn3: function(index，layero){

//按钮[按钮3]的回调

}

}，函数(index，layero){

//按钮[Button 1]的回调

}，函数(索引){

//按钮[button 2]的回调

});

//eg2

layer.open({

内容：“测试”

，btn: ['按钮一'，'按钮二'，'按钮三']

，是：函数(索引，图层){

//按钮[Button 1]的回调

}

，btn2: function(index，layero){

//按钮[button 2]的回调

//返回false打开此代码以禁止单击此按钮将其关闭。

}

，btn3: function(index，layero){

//按钮[按钮3]的回调

//返回false打开此代码以禁止单击此按钮将其关闭。

}

，取消：函数(){

//关闭右上角的回调

//返回false打开此代码以禁止单击此按钮将其关闭。

}

});

success - 层弹出后的成功回调方法

类型：函数，默认值：空

当需要在创建层时执行一些语句时，可以回调。成功需要两个参数，即当前层DOM当前层索引。比如：

layer.open({

内容：“测试回调”，

成功：函数(层，索引){

console.log(layero，index)；

}

});

yes -确定按钮回调方法

类型：函数，默认值：空

这个回调带有两个参数，即当前层索引和当前层DOM对象。比如：

layer.open({

内容：“测试回调”，

是：函数(索引，图层){

//做点什么

layer.close(索引)；//如果设置了yes回调，则需要手动关闭。

}

});

cancel - 右上角关闭按钮触发的回调

类型：函数，默认值：空

这个回调带两个参数，当前层的index参数和当前层的DOM对象，默认会自动触发关闭。如果不想关闭，就返回false，比如；

取消：函数(索引，图层){

If(confirm('确定要关闭'){//只有在单击确认框时，图层才会关闭。

layer.close(索引)

}

返回false

}

end - 层销毁后触发的回调

类型：函数，默认值：空

无论是确认还是取消，只要层被破坏，end就会在没有任何参数的情况下执行。

Layer.ready(回调)-初始化就绪

由于我们的层有一个内置的轻量级加载器，你根本不需要单独引入css之类的文件。但是加载总是需要一个过程。当你想在页面一打开就执行反弹层时，你最好把反弹层放入ready方法，比如：

//页面一打开就执行炸弹层

layer.ready(function(){

layer . msg(‘很高兴一开始就看到你’)；

});

Layer.close(索引)-关闭特定层(更重要)

似乎没有太多介绍的必要。唯一让你困惑的可能就是这个指数了。其实很容易得到。

//当您想要关闭当前页面的某一层时

var index=layer . open()；

var index=layer . alert()；

var index=layer . load()；

var index=layer . tips()；

//如你所见，每种播放层调用的模式都会返回一个索引

layer.close(索引)；//此时，你只需要轻轻地把获得的索引给layer.close

//如果要关闭最新的弹出图层，只需获取layer.index即可

layer.close(图层.索引)；//它总是获取最新的弹出图层，并且该值是在图层内部动态增量计算的。

//当您在iframe页面上关闭自己时

var index=parent . layer . getframeindex(window . name)；//首先获取当前iframe层的索引

parent . layer . close(index)；//再次执行关机

获取iframe页面的DOM

当您试图获取当前页面中iframe页面的DOM元素时，可以使用此方法。选择器是iframe页面的选择器。

layer.open({

类型：2，

内容：' test/iframe.html '，

成功：函数(层，索引){

var body=layer . get child frame(' body '，index)；

var iframeWin=window[layero . find(' iframe ')[0][' name ']]；//获取iframe页面的window对象，执行iframe页面的方法：iframewin . method()；

Console.log(body.html()) //获取iframe页面的正文内容

Body.find('input ')。val(“你好，我来自父页面”)

}

});

layer.getFrameIndex(windowName) - 获取特定iframe层的索引

该方法通常在iframe页面自行关闭时使用。

//假设这是一个iframe页面

var index=parent . layer . getframeindex(window . name)；//首先获取当前iframe层的索引

parent . layer . close(index)；//再次执行关机

封装图层弹出框和关闭图层弹出框的方法(周一给出了代码，现在手里没有代码)

总结

以上是边肖介绍的图层弹出图层样式的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。