layui入门及弹出层

1.layui概述

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在
极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本
发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员
量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

2.导入插件

<link rel="stylesheet" href="../layui/css/layui.css"/>
<script type="text/javascript" src="../layui/layui.js"></script>

3.基础代码

layui.use('layer', function(){

var layer = layui.layer;

layer.msg('Hello World');

});

运行结果

 1.最基本的消息框

type : 基本层类型,类型：Number，默认：0。可传入的值有：0（信息框），1（页面层），2（iframe层），3（加载层），4（tips层）。

如果想点击一个框而不影响其他的弹出框，在页面一般让type为1。

layer.open({
    type:1,//0~4
    title:['提示信息']
})

2.消息提示框

括号里面的第一个是显示的信息，后面的要显示的图标，数字不同代表的图标不同。想显示图标时，默认皮肤可以传入0-6，如果是加载层，可以传入0-2。

layer.alert('酷毙了', {icon: 1});//显示图标0~6
layer.alert('酷毙了');//不显示图标
layer.load(1);//加载层0~2

---

layer.msg("我是消息弹框，我3秒后消失");

这个消息框显示3秒钟后会消失，默认是3秒。

---

可以自定义标题和内容的消息提示框：

　　　　　　　//单个使用
            layer.open({
                  skin: 'demo-class'
            });
            //全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
            layer.config({
                  skin: 'demo-class'
            })

//CSS 
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。 

以上代码可以修改弹出层的样式

2.1基础弹框

layer.open({
    skin:'demo-class',//设置弹框样式
    area:['260px','160px'],//弹框的大小（宽，高），默认：'auto'
    title:['信息提示框','15px'],//弹框的标题
    content: '恭喜你通过了英语四级考试'//显示的消息内容
})

 2.2两个按钮的弹框

layer.confirm("确定删除吗？",{
    btn2: function(index, layero){
        //按钮【按钮二】的回调
        alert("点击了取消按钮")
    }
},
function(index, layero){
  //按钮【按钮一】的回调
  alert("点击了确定按钮")
}
);

 2.3 自定义可禁止关闭按钮的多按钮弹框：

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

layer.open({
                content:'你了解layui吗？',
                btn:['熟悉','了解','不清楚'],
                yes:function(index,layero){
                    alert("熟悉");
    　　                return false; //开启该代码可禁止点击该按钮来关闭窗口
                },
                btn2:function(index,layero){
                    alert("了解");
    　　                return false; //开启该代码可禁止点击该按钮来关闭窗口
                },
                btn3:function(index,layero){
                    alert("不清楚");
    　　                return false; //开启该代码可禁止点击该按钮来关闭窗口
                },
                cancel:function(index,layero){
                    //右上角关闭回调
                    return false;
                }
            })

 2.4按钮排列btnAlign

类型string 默认向右对齐“r”，“l”向左对齐，“c”居中对齐。

layer.open({
    btnAlign:'l',//设置靠左对齐
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

 2.5关闭按钮样式closeBtn

类型string/Boolean，提供了两种不同风格的关闭按钮样式，可通过1，2来设置，默认为1，如果不显示,则可以设置为closeBtn:0.

layer.open({
           closeBtn:'0',
           btnAlign:'c',//设置靠左对齐
           skin:'demo-class',
           area:['260px','160px'],
           title:['信息提示框','15px'],
           content: '恭喜你通过了英语四级考试'
      })

 2.6 shade遮罩

类型String，Array，Boolean，默认0.3，即弹层外区域，默认是0.3透明的黑色背景，如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不

想显示遮罩，可以shade: 0

layer.open({
    shade:[0.8,'#00ff00'],//弹框外层是透明度为0.8的#00ff00颜色
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

2.7 是否点击遮罩关闭shadeClose

类型Boolean，默认false，如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

layer.open({
                shade:[0.1,'#00ff23'],
                shadeClose:true,
                closeBtn:'2',
                btnAlign:'c',//设置靠左对齐
                skin:'demo-class',
                area:['260px','160px'],
                title:['信息提示框','15px'],
                content: '恭喜你通过了英语四级考试'
            })

2.8设置自动关闭时间，time

类型Number，毫秒，默认：0，默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

layer.open({
    time: 5000,//5s后自动关闭
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

2.9 id用于控制弹框唯一标识

类型String，默认空字符，设置该值后，不管是什么类型的层，都只允许同时弹出一个（一般看到的是弹出位置最后的一个）。一般用于页面层和iframe层模式。

layer.open({
    id:"open1",//设置id
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

2.10弹出动画，anim

类型number，默认0，目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数

0：平滑放大，默认            1：从上掉落                       2：从最底部往上滑入            3：从左滑入

4：从左翻滚                       5：渐显                              6：抖动

layer.open({
    anim:1,//设置出现的动画效果
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

2.11关闭动画isOutAnim

类型Boolean，默认：true，默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可

2.12最大最小化maxmin

类型Boolean，默认：false，该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

layer.open({
    type: 1,
    maxmin: true,//可调整大小化
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

2.13固定fixed

类型Boolean，默认：true，即鼠标滚动时，弹出层是否固定在可视区域。如果不想，设置fixed: false即可。

layer.open({
    fixed:false,//不固定弹出层
    anim:6,
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

2.14是否允许拉伸resize

类型Boolean，默认：true，默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效

layer.open({
    resize:true,//可在右下角拉动
    anim:6,
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

2.15监听窗口拉伸动作resizing

类型function，默认null，当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的DOM对象

layer.open({
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'，
     //当窗口拉伸时自动调用
     resizing:function(layor){
        console.log(layor);//这里会打印很多次，应该是改变一定的尺寸就会调用一次
    }
})

2.16是否允许浏览器出现滚动条scrollbar

类型：Boolean，默认：true，,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽。

layer.open({
　　scrollbar:false,//禁止浏览器出现滚动条
　　skin:'demo-class',
　　area:['260px','160px'],
　　title:['信息提示框','15px'],
　　content: '恭喜你通过了英语四级考试',
})

2.17设置弹框的位置坐标offset

offset: '100px'	只定义top坐标，水平保持居中	offset: ['100px', '50px']	同时定义top、left坐标
offset: 't'	设置顶部坐标（水平居中靠顶）	offset: 'r'	设置右边缘坐标（垂直居中靠右）
offset: 'b'	设置底部坐标（水平居中靠低）	offset: 'l'	设置左边缘坐标（垂直居中靠左）
offset: 'lt'	设置左上角（处于左上角）	offset: 'lb'	设置左下角（处于左下角）
offset: 'rt'	设置右上角（处于右上角）	offset: 'rb'	设置右下角（处于右下角）

layer.open({
　　offset: 't',
　　scrollbar:false,//禁止浏览器出现滚动条
　　skin:'demo-class',
　　area:['260px','160px'],
　　title:['信息提示框','15px'],
　　content: '恭喜你通过了英语四级考试',
})

2.18最大宽度、最大高度

maxWidth，类型：Number，默认：360。只有当area: 'auto'时，maxWidth的设定才有效。

layer.open({
    area:'auto',
    skin:'demo-class',
    content: '恭喜你通过了英语四级考试',
    maxWidth: 1000,//当内容宽度超过1000时才会换行
}) 

maxHeight，类型：Number，默认：无。只有当高度自适应时，maxHeight的设定才有效。

layer.open({
    area:'auto',
    skin:'demo-class',
    content: '恭喜你通过了英语四级考试',
    maxHeight: 100,//当内容高度超过100时会出现滚动条，如果设置了固定的高度也会出现这种情况
})

2.19层叠顺序zIndex

类型：，默认：19891014（贤心生日 0.0）一般用于解决和其它组件的层叠冲突。

2.20 弹框拖拽

1）设置触发拖动的元素

move，类型：String/DOM/Boolean，默认：'.layui-layer-title'。默认是触发标题区域拖拽来移动弹框。如果想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。设定move: false来禁止拖。

layer.open({
    skin:'demo-class',
    content: '恭喜你通过了英语四级考试'，
    move:false,//禁止拖拽弹框
})

2）是否允许拖拽到窗口外

moveOut，类型：Boolean，默认：false。默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可。

layer.open({
    skin:'demo-class',
    content: '恭喜你通过了英语四级考试',
    moveOut:true,//允许拖到窗口外
})

3）拖动完毕后的回调方法

moveEnd，类型：Function，默认：null。默认不会触发moveEnd，如果你需要，设定moveEnd: function(layero){}即可，其中layero为当前层的DOM对象。

layer.open({
    btn:['确定','取消'],
    type:1,
    skin:'demo-class',
    content: '恭喜你通过了英语四级考试',
    moveEnd:function(index,layero){//拖拽后执行的方法
        layer.open({
        skin:'demo-class',
        content: '你拖拽了弹框',
        });
    }
})

2.21

1）tips方向和颜色

类型：Number/Array，默认：2，tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']

<body>
    <input type="text" id="id" />
</body>
<script>
layui.use(['layer'],function(){
    var layer=layui.layer;
    layer.tips('从下面显示', '#id', {tips: [1,'#f0f']});
});
</script>

2）是否允许多个tips

tipsMore，类型：Boolean，默认：false。允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启。

layer.tips('从下面显示', '#id', {
    tips: [1,'#f0f'],
    tipsMore:true,
　}
);
layer.tips('从右面显示', '#id',{tipsMore:true,});

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

success，类型：Function，默认：null。当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM、当前层索引。

layer.open({
    content: '测试回调',
    success: function(layero, index){
       console.log(layero, index);
    }
});

4）确定按钮回调方法yes

yes，类型：Function，默认：null。该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：

layer.open({
  content: '测试回调',
  yes: function(index, layero){
    //do something
    layer.close(index); //如果设定了yes回调，需进行手工关闭
  }
});    

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

cancel，类型：Function，默认：null。该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可。

layer.open({
  content: '测试回调',
  cancel: function(index, layero){ 
  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
    layer.close(index)
  }
  return false; 
}   
});   

6）弹框销毁后触发的回调

end，类型：Function，默认：null，无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。

layer.open({
    content: '测试回调',
    btn:['确定','取消'],
    yes:function(index,layero){
        return false;//确定按钮禁止关闭弹框
    },
    end:function(){//弹框销毁（关闭）后执行
        alert("弹框被销毁啦")
    }
});

7）full/min/restore -分别代表最大化、最小化、还原 后触发的回调，类型：Function，默认：null。携带一个参数，即当前层DOM。

layer.open({
    content: '测试回调',
    btn:['确定','取消'],
    type:1,
    maxmin:true,
    full:function(layero){
        alert("点击最大化时执行")
    },
    min:function(layero){
        alert("点击最小化时执行")
    },
    restore:function(layero){
        alert("点击还原时执行")
    }
});

2.22深入理解layer的用法

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

它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数。

layer.config({
  anim: 1, //默认动画风格
  skin: 'layui-layer-molv' //默认皮肤
  …
});

除此之外，extend还允许你加载拓展的css皮肤，如下：

layer.config({
   //如果是独立版的layer，则将myskin存放在./skin目录下
   //如果是layui中使用layer，则将myskin存放在./css/modules/layer目录下
   extend: 'myskin/style.css'
});

2）初始化就绪，layer.ready

当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：

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

3）原始核心方法，layer.open（options）

 不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数。

var index=layer.open({
    content: '核心方法',
});
//可以通过layer.close(index)来关闭这个弹框

4）普通信息框，layer.alert（content, options, yes）

类似系统alert，但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可。如

layer.alert("只显示提示的内容");

layer.alert("有图标的显示内容",{icon:3})

layer.alert("我有回调，需点击确定时执行",{icon:1},function(){
    console.log("点击了确定，执行了回调")
})

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

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

//最完整的写法，不过一般取消是不用的，可以省略
layer.confirm("确定删除吗？",{
      icon:3,
    },
    function(index){
        alert("点击了确认");
    },
    function(index){
        alert("点击了取消")
    }
);

也可以这样写，把取消按钮放在options中，也可以在options中btn，换成自己的文字：

layer.confirm("确定删除吗？",{
        icon:3,
        //btn:['是','否'],
        btn2:function(index){
            alert("点击了取消")
        }
    },
    function(index){
        alert("点击了确认");
    },
);

最常用也是最简单的方式如下：

layer.confirm("确定删除吗？",
    function(index){
        alert("点击了确认");//do something
    },
);

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

它占据很少的面积，默认会3秒后自动消失，坚持零用户操作，参数也是自动补齐的。

layer.msg('只想弱弱提示');

layer.msg('有表情地提示', {icon: 6}); 

layer.msg("我还有回调方法",{
        icon:3,
        time:5000,//5秒后自动关闭,默认是3秒
    },
    function(){
    //添加关闭后执行的操作
    alert("关闭啦")
})

7）加载层layer.load(icon, options)

type:3的深度定制。load并不需要传太多的参数，如果不喜欢默认的加载风格，还有选择空间。icon支持传入0-2。如果是0，无需传，是默认的。load默认是不会自动关闭的，一般会在ajax回调体中关闭它。关闭使用layer.close(index);

var index = layer.load(1); //换成1的风格

var index = layer.load(2, {time: 10*1000}); //换2的方格，并且设定最长等待10秒，然后会自动关闭

8）tips层，layer.tips(content, follow, options)

type:4的深度定制。也是我本人比较喜欢的一个层类型，因为它拥有和msg一样的低调和自觉，而且会智能定位，即灵活地判断它应该出现在哪边。默认是在元素右边弹出

<input type="text" id="id" />

layer.tips('简单版：这里输入用户信息', '#id');

在元素的事件回调体中执行，如果这样使用，需要引入jquery：

$('#id').on('click', function(){
  var that = this;
  layer.tips('只想提示地精准些', that);
});

layer.tips('从下面显示', '#id', {tips: 1;time:5000});

9）关闭特定层，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.closeAll(); //疯狂模式，关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层

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

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

var index = layer.open();
//重新给指定层设定width、top等
layer.style(index, {
   '400px',
  top: '10px'
});

11）改变弹出层的标题 layer.title(title, index) 

var index = layer.open();
layer.title("输入信息",index)

12）获取iframe页的DOM，layer.getChildFrame(selector, index)*

layer.open({
  type: 2,
  content: 'iframe.html',//这里需要自定义页面
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);
    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
    var iframeWin = window[layero.find('iframe')[0]['name']]; 
    console.log(bodt.html()) //得到iframe页的body内容
    body.find('#id').val('Hi，我是从父页来的')
  }
});

iframe页面如下，

<body>
    输入信息：<input type="text" class="layui-input" id="id" name='name' />
    <br>
    输入信息：<input type="text" class="layui-input" id="id2" name='name2' />
</body>

13）获取特定iframe层的索引  layer.getFrameIndex(windowName) *

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

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

14）指定iframe层自适应 layer.iframeAuto(index) *

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

15）重置特定iframe url。layer.iframeSrc(index, url)*

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

当你的页面有很多很多layer窗口，你需要像Window窗体那样，点击某个窗口，该窗体就置顶在上面，那么setTop可以来轻松实现。

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

layer.open({
    btn:['最大化','最小化','还原'],
    context:'点击按钮呀',
    yes:function(index,layero){
          layer.full();
          return false;
    },btn2:function(index,layero){
          layer.min();
           return false;
    },btn3:function(index,layero){
          layer.restore();
           return false;
    }
});

18）tab层 layer.tab(options)

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});