1. 首页
  2. 第三方插件
  3. Layer弹层组件

Layer弹层组件

基础参数

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，使得用户页面轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。其甚至兼容了包括IE6在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。
参数 说明
type
基本层类型		 类型：Number，默认：0；
提供了5种层类型。可传入的值有： 0 信息框，默认 1页面层 2 iframe层 3 加载层 4 tips层。
若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
title
标题		 类型：String/Array/Boolean，默认：'信息'
title支持三种类型的值，若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本；
如若自定义标题区域样式，那么可以如此 title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；
如果你不想显示标题栏，你可以 title: false。
content
内容		 类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
skin
样式类名		 类型：String，默认：''
skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名，定义自己的风格。
area
宽高		 类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的。
当你宽高都要定义时，可以 area: ['500px', '300px']
offset
坐标		 类型：String/Array，默认：'auto'
默认垂直水平居中。但当你只想定义top时，你可以 offset: '100px'。当您top、left都要定义时，你可以 offset: ['100px', '200px']。除此之外，你还可以定义 offset: 'rb'，表示右下角。其它的特殊坐标，你可以自己计算赋值。
icon
图标。信息框和加载层的私有参数		 类型：Number，默认：-1（信息框）/ 0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6；如果是加载层，可以传入 0-2。
btn
按钮		 类型：String/Array，默认：'确认'
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。
当您只想自定义一个按钮时，你可以 btn: '我知道了'，
当你要定义两个按钮时，你可以 btn: ['yes', 'no']。
当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1和按钮2的回调分别是yes和cancel，而从按钮3开始，则回调为 btn3: function(){}，以此类推。
btnAlign
按钮排列		 类型：String，默认：r
可以快捷定义按钮的排列位置，默认值：btnAlign: 'r'，即右对齐，该参数可支持如下赋值
左：btnAlign: 'l'中：btnAlign: 'c'
closeBtn
关闭按钮		 类型：String/Boolean，默认：1
layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则 closeBtn: 0
shade
遮罩 		类型：String/Array/Boolean，默认：0.3
即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。
如果想定义别的颜色，可以 shade: [0.8, '#393D49']；
如果不想显示遮罩，可以 shade: 0
shadeClose
是否点击遮罩关闭 		类型：Boolean，默认：false
如果存在shade，可以设定shadeClose来控制点击弹层外区域关闭。
time
自动关闭所需毫秒		 类型：Number，默认：0
默认不会自动关闭。当要自动关闭时，可以 time: 3000，即代表3秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
id
用于控制弹层唯一标识		 类型：String，默认：空字符
设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
anim
动画		 类型：Number，默认：0
出场动画全部采用CSS3，这意味着除了IE6-9，其它所有浏览器都是支持的；目前 anim 可支持的动画类型有0-6 ，（请注意，3.0之前的版本用的 shift 参数）
maxmin
最大最小化		 类型：Boolean，默认：false
该参数值对 type:1 和 type:2 有效。
默认不显示最大小化按钮，需要显示配置 maxmin: true 即可
fixed
固定		 类型：Boolean，默认：true
即鼠标滚动时，层是否固定在可视区域；如果不想，设置 fixed: false 即可
scrollbar
是否允许浏览器出现滚动条		 类型：Boolean，默认：true
默认允许浏览器滚动，如果设定 scrollbar: false，则屏蔽
maxWidth
最大宽度 		默认：360
当 area: 'auto' 时，maxWidth的设定才有效
zIndex
层叠顺序 		默认：19891014（作者生日）
一般用于解决和其它组件的层叠冲突。
move
触发拖动的元素		 类型：String/DOM/Boolean，默认：'.layui-layer-title'
默认是触发标题区域拖拽。如果想单独定义，指向元素的选择器或者DOM即可，如 move: '.mine-move'。
还可以配置设定 move: false 来禁止拖拽
moveType
拖拽风格		 类型：Number，默认：0
默认的拖拽风格会有个过度的透明框。如若不喜欢，可以设定 moveType: 1 切换到传统的拖拽模式
moveOut
是否允许拖拽到窗口外		 类型：Boolean，默认：false
默认只能在窗口内拖拽，如若想拖到窗外，可设定 moveOut: true
moveEnd
拖动完毕后的回调方法		 类型：Function，默认：null
默认不会触发moveEnd，如需要，设定 moveEnd: function(){} 即可
tips
tips方向和颜色		 类型：Number/Array，默认：2
tips层的私有参数，支持上右下左四个方向，通过 1-4 进行方向设定。
如 tips: 3 则表示在元素的下面出现。
有时还可能会定义一些颜色，可设定 tips: [1, '#c00']
tipsMore
是否允许多个tips		 类型：Boolean，默认：false
允许多个意味着不会销毁之前的tips层，通过 tipsMore: true 开启
success
层弹出后的成功回调方法 		类型：Function，默认：null
当需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM和当前层索引。
yes
确定按钮回调方法		 类型：Function，默认：null
该回调携带两个参数，分别为当前层DOM和当前层索引。
cancel
取消和关闭按钮触发的回调		 类型：Function，默认：null
该回调同样只携带当前层索引一个参数，无需进行手工关闭。
如果不想关闭，return false即可，如 cancel: function(index){ return false; } 则不会关闭；
end
层销毁后触发的回调		 类型：Function，默认：null
无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数

内置方法

layer.config(options) - 初始化全局配置

这是一个可以重要也可以不重要的方法；重要的是，它的权利真的很大，尤其是在模块化加载layer时，必须要用到它，它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数；而说它不重要，是因为多数情况下很少需要它。本站就是使用了这种情况。

如果采用 seajs 或者 requirejs 加载layer，就需要执行该方法来完成初始化的配置，比如：

  1. layer.config({
  2. //layer.js所在的目录，可以是绝对目录，也可以是相对目录
  3. path: '/res/layer/'
  4. });
  5. /*这样的话，layer就会去加载一些它所需要的配件，比如css等。
  6. 当然，即便不用 seajs 或者 requirejs，也可以通过上述方式设定路径*/

如果采用 <script src="?a.js&layer.js"> 这种合并的方式引入layer，那么就需要在 script 标签上加一个自定义属性 merge="true"，如：

  1. <script src="?a.js&layer.js" merge="true">
  2. //这样的话，layer就不会去自动去获取路径，但需要通过以下方式来完成初始化的配置
  3. layer.config({
  4. //layer.js所在的目录，可以是绝对目录，也可以是相对目录
  5. path: '/res/layer/'
  6. });
  7. </script>

但 layer.config 的作用远不止上述这样。它还可以配置层的 基础参数，如：

  1. layer.config({
  2. anim: 1,//默认动画风格
  3. skin: 'layui-layer-molv'//默认皮肤
  4. …
  5. });
  6. //除此之外，extend还允许你加载拓展的css皮肤，如：
  7. layer.config({
  8. /*如果是独立版的layer，则将myskin存放在./skin目录下
  9. 如果是layui中使用layer，则将myskin存放在./css/modules/layer目录下*/
  10. extend: 'myskin/style.css'
  11. });

layer.ready(callback) - 初始化就绪

由于layer内置了轻量级加载器，因此不需要单独引入css等文件。但是加载总是需要过程的。如果当页面一打开就要执行弹层时，最好是将弹层放入ready方法中，如：

  1. //页面一打开就执行弹层
  2. layer.ready(function(){
  3. layer.msg('很高兴一开场就见到你');
  4. });

layer.open(options) - 原始核心方法

基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走 layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的 options 即是基础参数，另外，该文档统一采用 options 作为基础参数的标识例子，如：

  1. var index = layer.open({
  2. content: 'test'
  3. });
  4. //拿到的index是一个重要的凭据，它是诸如 layer.close(index) 等方法的必传参数

layer.alert(content, options, yes) - 普通信息框

它的弹出似乎显得有些高调，一般用于对用户造成比较强烈的关注，类似系统alert，但却比alert更灵便。它的参数是自动向左补齐的，通过第二个参数，可以设定各种所需要的 基础参数，但如果不需要的话，直接写回调即可，如

  1. //eg.1
  2. layer.alert('只想简单的提示');
  4. //eg.2
  5. layer.alert('加了个图标', {icon: 1});//这时如果你也还想执行yes回调，可以放在第三个参数中
  7. //eg.3
  8. layer.alert('有了回调', function(index){
  9. //do something
  10. layer.close(index);
  11. });

layer.confirm(content, options, yes, cancel) - 询问框

类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。

  1. //eg.1
  2. layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  3. //do something
  4. layer.close(index);
  5. });
  7. //eg.2
  8. layer.confirm('is not?', function(index){
  9. //do something
  10. layer.close(index);
  11. });

layer.msg(content, options, end) - 提示框

源码中有了相对较大的篇幅来定制了这个msg，目的是想将其打造成露脸率最高的提示框，因其简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失，因此在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作，而且它的参数也是自动补齐的。

  1. //eg.1
  2. layer.msg('只想弱弱提示');
  4. //eg.2
  5. layer.msg('有表情地提示', {icon: 6});
  7. //eg.3
  8. layer.msg('关闭后想做些什么', function(){
  9. //do something
  10. });
  12. //eg.4
  13. layer.msg('同上', {
  14. icon: 1,
  15. time: 2000//2秒关闭（如果不配置，默认是3秒）
  16. }, function(){
  17. //do something
  18. });

layer.load(icon, options) - 加载层

type:3的深度定制。load并不需要传太多的参数，如果不喜欢默认的加载风格，还是有选择空间的。icon支持传入0-2，如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

  1. //eg.1
  2. var index = layer.load();
  3. //eg.2
  4. var index = layer.load(1); //换了种风格
  6. //eg.3
  7. var index = layer.load(2, {time: 10*1000});//又换了种风格，并且设定最长等待10秒
  8. //关闭
  9. layer.close(index);

layer.tips(content, follow, options) - tips层

type:4的深度定制，会智能定位――即灵活地判断它应该出现在哪边，默认是在元素右边弹出

  1. //eg.1
  2. layer.tips('只想提示地精准些', '#id');
  4. //eg.2
  5. $('#id').on('click', function(){
  6. var that = this;
  7. layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
  8. });
  10. //eg.3
  11. layer.tips('在上面', '#id', {
  12. tips: 1
  13. });

layer.close(index) - 关闭特定层

关于它似乎没有太多介绍的必要，唯一让你疑惑的，可能就是这个 index 了吧，事实上它非常容易得到。

  1. //当你想关闭当前页的某个层时
  2. var index = layer.open();
  3. var index = layer.alert();
  4. var index = layer.load();
  5. var index = layer.tips();
  7. //每一种弹层调用方式，都会返回一个index
  8. layer.close(index); //此时只需要把获得的index，轻轻地赋予layer.close即可
  10. //当你在iframe页面关闭自身时
  11. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  12. parent.layer.close(index); //再执行关闭

layer.closeAll(type) - 关闭所有层

如果不想去获取index来关闭弹层，那么 closeAll为首选；如果不指向层类型的话，它会销毁掉当前页所有的layer层。当然，如果只想关闭某个类型的层，那么可以按如下方式：

  1. layer.closeAll(); //疯狂模式，关闭所有层
  2. layer.closeAll('dialog'); //关闭信息框
  3. layer.closeAll('page'); //关闭所有页面层
  4. layer.closeAll('iframe'); //关闭所有的iframe层
  5. layer.closeAll('loading'); //关闭加载层
  6. layer.closeAll('tips'); //关闭所有的tips层

layer.style(index, cssStyle) - 重新定义层的样式

该方法对 loading 层和 tips 层无效，参数 index 为层的索引，cssStyle允许传入任意的css属性

  1. //重新给指定层设定width、top等
  2. layer.style(index, {
  3. width: '1000px',
  4. top: '10px'
  5. });

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. //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
  7. var iframeWin = window[layero.find('iframe')[0]['name']];
  8. console.log(body.html()) //得到iframe页的body内容
  9. body.find('input').val('Hi，我是从父页来的')
  10. }
  11. });

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

此方法一般用于在iframe页关闭自身时用到

  1. //假设这是iframe页
  2. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  3. parent.layer.close(index); //再执行关闭

layer.iframeAuto(index) - 指定iframe层自适应

调用该方法时，iframe层的高度会重新进行适应

layer.iframeSrc(index, url) - 重置特定iframe url

使用方式：layer.iframeSrc(index, 'http://sentsin.com');

layer.setTop(layero) - 置顶当前窗口

非常强大的一个方法，虽然一般很少用，但是当页面中有很多很多layer窗口，需要像Window窗体那样，点击某个窗口，该窗体就置顶在上面，那么 setTop 可以来轻松实现，它采用巧妙的逻辑，以使这种置顶的性能达到最优

  1. //通过这种方式弹出的层，每当它被选择，就会置顶
  2. layer.open({
  3. type: 2,
  4. shade: false,
  5. area: '500px',
  6. maxmin: true,
  7. content: 'http://www.layui.com',
  8. zIndex: layer.zIndex, //重点1
  9. success: function(layero){
  10. layer.setTop(layero); //重点2
  11. }
  12. });

layer.full()、layer.min()、layer.restore() - 手工执行最大小化

一般用于在自定义元素上触发最大化、最小化和全屏

其它内置层

layer.prompt(options, yes) - 输入层

prompt的参数也是向前补齐的。options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然，也可以不传。yes携带 value: 表单值index: 索引elem: 表单元素

  1. //prompt层新定制的成员如下
  2. {
  3. formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
  4. value: '', //初始时的值，默认空字符
  5. maxlength: 140, //可输入文本的最大长度，默认500
  6. }
  8. //eg.1
  9. layer.prompt(function(value, index, elem){
  10. alert(value); //得到value
  11. layer.close(index);
  12. });
  14. //eg.2
  15. layer.prompt({
  16. formType: 2,
  17. value: '初始值',
  18. title: '请输入值',
  19. area: ['800px', '350px'] //自定义文本域宽高
  20. }, function(value, index, elem){
  21. alert(value); //得到value
  22. layer.close(index);
  23. });

layer.tab(options) - tab层

tab层只单独定制了一个成员，即 tab: []

  1. layer.tab({
  2. area: ['600px', '300px'],
  3. tab: [{
  4. title: 'TAB1',
  5. content: '内容1'
  6. }, {
  7. title: 'TAB2',
  8. content: '内容2'
  9. }, {
  10. title: 'TAB3',
  11. content: '内容3'
  12. }]
  13. });

layer.photos(options) - 相册层

相册层，也可以称之为图片查看器，它的出场动画从layer内置的动画类型中随机展现；photos支持传入json和直接读取页面图片两种方式，如果是json传入，如下：

  1. $.getJSON('/yourDomain/photos.json', function(json){
  2. layer.photos({
  3. photos: json,
  4. //anim有0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
  5. anim: 5
  6. });
  7. });
  9. //而返回的json需严格按照如下格式：
  10. {
  11. "title": "", //相册标题
  12. "id": 123, //相册id
  13. "start": 0, //初始显示的图片序号，默认0
  14. "data": [//相册包含的图片，数组格式
  15. {
  16. "alt": "",
  17. "pid": 666, //图片id
  18. "src": "", //原图地址
  19. "thumb": "" //缩略图地址
  20. }
  21. ]
  22. }

如果是直接从页面中获取图片，那么需要指向图片的父容器，并且img可以设定一些规定的属性（但不是必须的）

  1. //HTML示例
  2. <div id="layer-photos-demo" class="layer-photos-demo">
  3. <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  4. <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  5. </div>
  7. <script>
  8. //调用示例
  9. layer.photos({
  10. photos: '#layer-photos-demo',
  11. anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
  12. });
  13. </script>

以下为图片实例：

第一张图 第二张图 第三张图 第四张图

第二种方式的图片查看器显然更加简单，因为无需像第一种那样返回规定的json，但是它们还是有各自的应用场景的，可按需选择，另外，photos还有个 tab 回调，切换图片时触发

  1. layer.photos({
  2. photos: json/选择器,
  3. tab: function(pic, layero){
  4. console.log(pic) //当前图片的一些信息
  5. }
  6. });

如果是页面层

  1. layer.open({
  2. type: 1,
  3. //这里content是一个普通的String
  4. content: '传入任意的文本或html'
  5. });
  1. layer.open({
  2. type: 1,
  3. //这里content是一个DOM
  4. content: $('#id')
  5. });

Ajax获取

  1. $.post('url', {}, function(str){
  2. layer.open({
  3. type: 1,
  4. content: str //注意，如果str是object，那么需要字符拼接
  5. });
  6. });

如果是iframe层

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

如果是用layer.open执行tips层

  1. layer.open({
  2. type: 4,
  3. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
  4. });
  1. //单个使用①
  2. layer.open({
  3. skin: 'demo-class'
  4. });
  1. //全局使用，即所有弹层都默认采用，但 ① 的优先级更高
  2. layer.config({
  3. skin: 'demo-class'
  4. });
  1. //CSS
  2. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
  3. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  4. body .demo-class .layui-layer-btn a{background:#333;}
  5. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
值 备注
offset: '100px' 只定义top坐标，水平保持居中
offset: ['100px', '50px'] 同时定义top、left坐标
offset: 't' 快捷设置顶部坐标
offset: 'r' 快捷设置右边缘坐标
offset: 'b' 快捷设置底部坐标
offset: 'l' 快捷设置左边缘坐标
offset: 'lt' 快捷设置左上角
offset: 'lb' 快捷设置左下角
offset: 'rt' 快捷设置右上角
offset: 'rb' 快捷设置右下角
  1. //Eg.
  2. layer.alert('酷毙了',
  3. { icon: 1});
  1. //Eg.
  2. layer.msg('不开心。。',
  3. { icon: 5});
  1. //Eg.
  2. //风格1的加载
  3. layer.load(1);
  1. //Eg. 1
  2. layer.open({
  3. content: 'test',
  4. btn: ['按钮一', '按钮二', '按钮三'],
  5. yes: function(index, layero){
  6. //【按钮一】的回调
  7. }, btn2: function(index, layero){
  8. //【按钮二】的回调
  9. }, btn3: function(index, layero){
  10. //【按钮三】的回调
  11. }, cancel: function(){
  12. //右上角关闭回调
  13. }
  14. });
  1. //Eg. 2
  2. layer.confirm('纳尼？', {
  3. //btn可以无限个按钮
  4. btn: ['按钮一', '按钮二', '按钮三'],
  5. btn3: function(index, layero){
  6. //【按钮三】的回调
  7. }
  8. }, function(index, layero){
  9. //【按钮一】的回调
  10. }, function(index){
  11. //【按钮二】的回调
  12. });
  1. layer.open({
  2. content: '测试回调',
  3. success: function(layero, index){
  4. console.log(layero, index);
  5. }
  6. });
  1. layer.open({
  2. content: '测试回调',
  3. yes: function(index, layero){
  4. //do something
  5. layer.close(index); //如果设定了yes回调，需进行手工关闭
  6. }
  7. });

在线调试 清空