layui(3)——内置模块弹出层

弹出层

 

1.基础参数

使用模块layer

layui.use('layer', function(){
  var layer = layui.layer;
  


});              

<script>
    layui.use('layer', function () {
        var layer = layui.layer;

        layer.open({
            // layer提供了5种层类型。可传入的值有：0（信息框，默认）   1（页面层）    2（iframe层）    3（加载层）     4（tips层）
            type: 0,
            title: '在线调试',
            // title: false,
            // 自定义标题区域样式，那么你可以title: ['文本', '']，数组第二项可以写任意css样式
            // title: ['在线文本', 'color:red;font-size:20px'],
            content: '配置各种参数，试试效果',
            // 目前layer内置的skin有：layui-layer-lan   layui-layer-molv  demo-class 默认
            skin: 'layui-layer-lan'
        });
    });              
</script>

参数有：

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

title  ：标题  自定义标题区域样式，那么你可以title: ['文本', '']，数组第二项可以写任意css样式

content  ：内容

skin ：目前layer内置的skin有：layui-layer-lan   layui-layer-molv  demo-class 默认

area : 默认：'auto'，在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']

icon : 图标

 

icon- 图标 

默认-1 无图标

icon：0

 icon：1

icon:2

icon:3

icon:4

 

icon:5

 icon:6

 

 

btn-按钮

默认：'确认'

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。

当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。

<script>
    layui.use('layer', function () {
        var layer = layui.layer;

        layer.open({
            // layer提供了5种层类型。可传入的值有：0（信息框，默认）   1（页面层）    2（iframe层）    3（加载层）     4（tips层）
            type: 0,
            title: '在线调试',
            // title: false,
            // 自定义标题区域样式，那么你可以title: ['文本', '']，数组第二项可以写任意css样式
            // title: ['在线文本', 'color:red;font-size:20px'],
            content: '配置各种参数，试试效果',
            // 目前layer内置的skin有：layui-layer-lan   layui-layer-molv  demo-class 默认
            skin: 'layui-layer-molv',
            btn: ['按钮1', '按钮2', '按钮3'],
            icon: 6,
            yes: function (index, layero) {
                //按钮【按钮一】的回调
                console.log("按钮1的");
                layer.close(index);
                //return false 开启该代码 点击该按钮 不关闭
            }
            , btn2: function (index, layero) {
                //按钮【按钮二】的回调
                console.log("按钮2的");
                //return false 开启该代码 点击该按钮 不关闭
            }
            , btn3: function (index, layero) {
                //按钮【按钮三】的回调
                console.log("按钮3的");
                //return false 开启该代码 点击该按钮 不关闭
            }, cancel: function () {
                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭
            }

        });
    });              
</script>

 

btnAlign - 按钮排列

类型：String，默认：r

你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。该参数可支持的赋值如下：

值	备注
btnAlign: 'l'	按钮左对齐
btnAlign: 'c'	按钮居中对齐
btnAlign: 'r'	按钮右对齐。默认值，不用设置

closeBtn-关闭按钮

类型：String/Boolean，默认：1

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0

 

配置1：

 

配置2：

 

 不显示

 

shade- 遮罩

类型：String/Array/Boolean，默认：0.3

即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0

 

shadeClose- 是否点击遮罩关闭

类型：Boolean，默认：false

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

就是点击弹出层外面，点击后，就会关闭弹出层

time - 自动关闭所需毫秒

类型：Number，默认：0

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

id- 用于控制弹层唯一标识

类型：String，默认：空字符

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

anim - 弹出动画

类型：Number，默认：0

我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数

值	备注
anim: 0	平滑放大。默认
anim: 1	从上掉落
anim: 2	从最底部往上滑入
anim: 3	从左滑入
anim: 4	从左翻滚
anim: 5	渐显
anim: 6	抖动

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; 
}    

 

2.内置方法

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

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

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

 

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

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

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

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

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

//eg1
layer.alert('只想简单的提示');        
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){
  //do something
  
  layer.close(index);
});       

 

 

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

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

 

//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  //do something
  
  layer.close(index);
});
//eg2
layer.confirm('is not?', function(index){
  //do something
  
  layer.close(index);
});       

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

我们在源码中用了相对较大的篇幅来定制了这个msg，目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。

 

//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6}); 
//eg3
layer.msg('关闭后想做些什么', function(){
  //do something
}); 
//eg
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
  //do something
});   

 

 

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

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

//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 
//关闭
layer.close(index);     

 

 

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); //再执行关闭 
     
    //关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
    layer.close(index, function(){
      //do something
    });  

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

如果你很懒，你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话，它会销毁掉当前页所有的layer层。当然，如果你只想关闭某个类型的层，那么你可以

layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层    
 
//关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
layer.closeAll('loading', function(){ //关闭 loading 并执行回调
  //do something
}); 
layer.closeAll(function(){ //关闭所有层并执行回调
  //do something
}); 

 

还有些不常用
参考layer弹层组件开发文档 - Layui