前端最好用弹框组件-layer-阿里云开发者社区

layer是一款近年来备受青睐的web弹层组件,它甚至兼容了包括IE6在内的所有主流浏览器;而且layer采用MIT开源许可证,将会永久性提供无偿服务.现在你肯定对layer充满了兴趣,首先,了解layer肯定避不开layui,layui是一个集合多个组件,例如:layer/laypage/laydate等的前端框架,和Bootstrap是同类别的,而layer一直是layui的代表作.如果舍弃layui单独使用layer的话，他需要依赖于jq1.8以上版本引入；废话不多说，直接能进入layer的学习吧

学习layer第一个知识点就是:layer中所有弹框的参数都是向左自动补齐的

我们来看下layer的弹框分哪几种：

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

layer.msg()应该说是最简单和最自觉的,不仅占据很少的面积而且默认3秒后即自动消失,也因此让他成为程序员的最爱;

layer.msg('玩命提示中');

layer.msg(content, options, end)-提示框可以有三个参数:弹框内容/弹框样式(弹框样式有很多,这里只是举个例子,具体的后面详细介绍)/关闭时调用的函数,eg:

layer.msg('玩命提示中...', {
  icon: 1, //icon-图标,信息框和加载层的私有参数,类型:Number,默认:-1(信息框)/0(加载层);信息框默认不显示图标,想显示图标时默认皮肤可以传入0-6;如果是加载层可以传入0-2
  time: 5000, //5秒关闭(默认是3秒)
  btn: ['明白了', '知道了'],
}, function(){
  alert('轻轻的我走了,正如我轻轻的来')
});

不要以为msg仅仅这些功能,其实它还有很多其他的功能,例如:msg也可以添加按钮,如果time设置为0即不自动关闭时可以通过按钮来控制;有了按钮便可以给按钮编写回调函数;第一个按钮的函数名称时yes,后面就依次:btn2/btn3...;编写回调函数的时候默认传两个参数(index,layero)index和当前层DOM对象

layer.msg('玩命提示中...', {
  icon: 1, 
  time: 0, //time取0则不关闭
  btn: ['嘿嘿', '呵呵','哈哈'],
  yes:function(){
    history.go(-1);
  },
  btn2:function(){
    location.reload();
  },
  btn3:function(index,layero){
    layer.msg("按钮2回调,参数是:"+index);
    return false //开启该代码可禁止点击该按钮关闭
  },
}, function(){
  alert('轻轻的我走了,正如我轻轻的来')
});

msg还可以与layer中很多其他类型的弹框一起使用

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

layer.alert的弹出就比msg高调,一般用于对用户造成较强烈的关注,类似系统alert,却更灵便

layer.alert('只想简单的提示');

知道msg可以有那么多功能后肯定对alert的期待也不仅仅如此,so layer.alert也的确没有让大家失望.layer.alert(content,options,yes)-layer.alert同样有三个参数,第一个是弹出内容，第二个是样式设置,第三个是回调函数.下面来看个msg与alert的合作示例:

layer.alert('墨绿风格，点击确认看深蓝', {
  skin: 'layui-layer-molv', //样式类名,自定义样式
  closeBtn: 1, // 是否显示关闭按钮
  anim: 1, //动画类型
  btn: ['重要','奇葩'], //按钮
  icon: 6,    // icon
  yes:function(){
    layer.msg('按钮1');
  },
  btn2:function(){
    layer.msg('按钮2');
  },
  success:function(){
    alert('调用成功');
  }
});

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

tips层也是我大家比较喜欢的一个层类型,因为它拥有和msg一样的低调和自觉,而且会智能定位,即灵活地判断它应该出现在哪边,默认是在元素右边弹出

layer.tips('只想提示地精准些', '#ida');

layer.tips(content,follow,options)-同样可以有三个参数,但却和上面两个的参数有些不同;第一个参数是弹出内容,第二个参数是吸附元素选择器,第三个是弹框样式

layer.tips('只想提示地精准些', '#ida', {
    tips:[1,'#3595CC'], 
    area: 'auto',    
    maxWidth: '300', //area:'auto'时maxWidth的设定才有效
});

tips层的私有参数;支持上右下左四个方向,通过1-4进行方向设定,默认是2,有时还可能会定义颜色

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

类似系统confirm,但却远胜confirm;另外它不是和系统confirm一样阻塞你需要把交互的语句放在回调体中

layer.confirm('您是如何看待前端开发？', {
  btn: ['重要','奇葩'] //可以无限个按钮
}, function(){ //这两个function相当于两个按钮点击事件的回调函数
  layer.msg('的确很重要', {icon: 1});
}, function(){
  layer.msg('也可以这样', {
    time: 2000, //2s后自动关闭
    btn: ['明白了', '知道了']
  });
});

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

layer.load(0, {shade: false}); //0代表加载的风格

load并不需要太多参数,如果不喜欢默认加载风格,icon支持传入0-2;如果是0无需传;另外load默认是不会自动关闭的,一般会在ajax回调体中通过layer.close(index);关闭它

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

layer.prompt(options,yes)-不仅支持传入基础参数还可以传入prompt专用的属性,也可以不传;那么prompt都有哪些专有属性呢

prompt层新定制的成员如下

{
  formType: 1, //输入框类型,支持0(文本)默认 1(密码) 2(多行文本)
  value: '', //初始时的值,默认空字符
  maxlength: 140, //可输入文本的最大长度,默认500
}

layer.prompt(options,yes)中yes携带value表单值/index索引/elem表单元素/

layer.prompt({
  formType: 2, 
  value: '请输入....', 
  title: 'prompt输入框',
  area: ['300px', '150px'],
  maxlength: 100 
  }, 
  function(value, index, elem){
    alert(value); //得到value
    layer.close(index);
  }
);

layer.tab(options)-tab层

layer.tab(options)只单独定制了一个成员，即tab:[],这个好像没有什么可介绍的,简单粗暴看例子吧:

layer.tab({
  area: ['500px', '200px'], //每个tab标题最小80px最大260px
  tab:[{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
})

相册层

相册层,也称为图片查看器,它的出场动画从layer内置的动画类型中随机展现;photos支持传入json和直接读取页面图片两种方式

json传入

先来看我的json文件,json需严格按照如下格式:

{
  "status": 1,
  "msg": "",
  "title": "photo",
  "id": 8,
  "start": 0,
  "data": [
    {
      "alt": "layer",
      "pid": 109,
      "src": "theme/default/icon.png",
      "thumb": ""
    },
    {
      "alt": "bbb",
      "pid": 110,
      "src": "theme/default/icon-ext.png",
      "thumb": ""
    },
    {
      "alt": "ccc",
      "pid": 111,
      "src": "theme/default/loading-0.gif",
      "thumb": ""
    },
    {
      "alt": "ddd",
      "pid": 112,
      "src": "theme/default/loading-1.gif",
      "thumb": ""
    },
    {
      "alt": "eee",
      "pid": 113,
      "src": "theme/default/loading-2.gif",
      "thumb": ""
    }
  ]
}

下面是调用这个json文件的例子:

$.getJSON('/jquery/photos.json', function(json){
  layer.photos({
    photos: json,
    anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意:3.0之前的版本用shift参数)
  });
});

直接从页面中获取

<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="hja" layer-src="js/theme/default/icon.png" src="js/theme/default/icon.png" alt="图片1"> <!-- layer-pid可以省略 -->
  <img layer-pid="hjb" layer-src="js/theme/default/icon-ext.png" src="js/theme/default/icon-ext.png" alt="图片2">
</div>
<script>
  layer.photos({ 
  photos: '#layer-photos-demo',
  anim: 5, 
  tab: function(pic, layero){
    alert(pic, layero) //当前图片的一些信息
  }
});
</script>

即时通信

LayIM包含:自定义会话/接受好友音频视频/申请加群/客服模式等多个功能;但是LayIM是layui目前唯一的付费组件,所以在下载的layui包里并不包含LayIM,这里也不多说,有兴趣的同学可以自己付费学习

layer.open

layer.open(options)-是layer的最原始核心方法,也是露脸率最高的方法;不管是使用哪种方式创建层都是走layer.open();创建任何类型的弹层都会返回一个当前层索引;options即是基础参数

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

以layer.open为例来了解下layer中的参数:

基础参数

基础参数主要指调用方法时用到的配置项,如:layer.open({content:''})/layer.msg('',{time:3})等;content和time即是基础参数,以键值形式存在;基础参数可合理应用于任何层类型中,大多数都是可选的

type-基本层类型

类型:Number,默认:0;layer提供了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的不同而不同

//如果是页面层
layer.open({
  type:1, 
  content:'传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type:1,
  content:$('#ida') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});

//Ajax获取
$.post('url',{},function(str){
  layer.open({
    type:1,
    content:str //如果str是object则需要字符拼接
  });
});

//如果是iframe层
layer.open({
  type:2, 
  content:'http://www.yonglibao.com' //这里content是一个URL,如果不想让iframe出现滚动条可以content:['http://sentsin.com','no']
}); 

//如果是用layer.open执行tips层
layer.open({
  type:4,
  content:['内容','#ida'] //数组第二项即吸附元素选择器或者DOM
});

skin-样式类名

类型:String,默认:'';skin不仅允许传入layer内置的样式class名,还可以传入自定义的class名,这意味着可以借助skin轻松完成不同的风格定制.目前layer内置的skin有:layui-layer-lan/layui-layer-molv

//单个使用
layer.open({
  skin:'demo-class'
});

//全局使用,即所有弹出层都默认采用,但是单个配置skin的优先级更高
<style>
  .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
  .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  .demo-class .layui-layer-btn a{background:#333;}
  .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
</style>
layer.config({
  skin: 'demo-class'
})

area-宽高

类型:String/Array,默认:'auto',即layer是宽高都自适应的;但当你只想定义宽度时,可以area:'500px',高度仍然是自适应的;当宽高都要定义时,可以area:['500px','300px']

offset-坐标

类型:String/Array,默认:垂直水平居中;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'	快捷设置右下角

icon-图标

icon为信息框和加载层的私有参数;类型:Number,默认:-1(信息框)/0(加载层);信息框默认不显示图标,想显示图标,默认皮肤可以传入0-6;如果是加载层,可以传入0-2

layer.alert('酷毙了', {icon: 1});
layer.msg('不开心。。', {icon: 5});
layer.load(1); //风格1的加载

btn-按钮

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

//eg1       
layer.confirm('纳尼？',{
  btn:['按钮一','按钮二','按钮三'], //可以无限个按钮
  btn3:function(index,layero){} //按钮【按钮三】的回调  
}, 
function(index, layero){}, //按钮一的回调  
 function(index){} //按钮二的回调  
);
//eg2
layer.open({
  content:'test',
  btn:['按钮一','按钮二','按钮三'],
  yes:function(index,layero){}, //按钮一的回调    
  btn2: function(index, layero){}, //按钮二的回调    
  btn3: function(index, layero){}, //按钮三的回调  
  cancel: function(){} //右上角关闭回调  
});

btnAlign-按钮排列

类型:String,默认:r;可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐;该参数可支持的赋值如下：

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

closeBtn-关闭按钮

类型:String/Boolean,默认:1;layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示则closeBtn:0

layer.open({
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
});

shade-遮罩

类型:String/Array/Boolean,默认:0.3;默认是0.3透明度的黑色背景('#000');如果你想定义别的颜色,可以shade:[0.8,'#393D49'];如果你不想显示遮罩,可以shade:0

layer.open({
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
  shade:0.8,
});

shadeClose-是否点击遮罩关闭

类型:Boolean,默认:false;如果shade是存在的可以设定shadeClose来控制点击弹层外区域关闭

layer.open({
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
  shade:0.8,
  shadeClose:true,
});

time-自动关闭所需毫秒

类型:Number,默认:0-不会自动关闭;想自动关闭时可以time:5000,即代表5秒后自动关闭,注意单位是毫秒

layer.open({
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
  shade:0.8,
  shadeClose:true,
  time:2000,
});

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

类型:String,默认:空字符;设置该值后不管是什么类型的层都只允许同时弹出一个,一般用于页面层和iframe层模式

layer.open({
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
  shade:0.8,
  shadeClose:true,
  time:2000,
  id:'aaa',
});

anim-动画

类型:Number,默认:0;我们的出场动画全部采用CSS3,即除了ie6-9其它所有浏览器都是支持的;目前anim可支持的动画类型有0-6,(请注意:3.0之前版本用的shift参数)

layer.open({
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
  shade:0.8,
  shadeClose:true,
  id:'aaa',
  anim:1,
});

maxmin-最大最小化

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

layer.open({
  type:1,
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
  shade:0.8,
  shadeClose:true,
  id:'aaa',
  anim:1,
  maxmin:true,
});

fixed-固定

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

layer.open({
  type:1,
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:1,
  shade:0.8,
  shadeClose:true,
  id:'aaa',
  anim:1,
  maxmin:true,
  fixed:false,
});

resize-是否允许拉伸

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

layer.open({
  type:1,
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:2,
  shade:0.8,
  shadeClose:true,
  anim:1,
  maxmin:true,
  fixed:true,
});

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

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

layer.open({
  type:1,
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:2,
  shade:0.8,
  shadeClose:true,
  anim:1,
  maxmin:true,
  fixed:true,
  scrollbar:false,
});

maxWidth-最大宽度

默认:360;只有当area:'auto'时maxWidth的设定才有效。

layer.open({
  area:'auto',
  type:1,
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:2,
  shade:0.8,
  shadeClose:true,
  anim:1,
  fixed:true,
  scrollbar:false,
  maxWidth:300,
});

zIndex-层叠顺序

默认:19891014(贤心生日),一般用于解决和其它组件的层叠冲突

move-触发拖动的元素

类型:String/DOM/Boolean,默认:'.layui-layer-title'-触发标题区域拖拽;如果你想单独定义,指向元素的选择器或者DOM即可,如move:'.mine-move',你还配置设定move:false来禁止拖拽

layer.open({
  area:'auto',
  type:1,
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:2,
  shade:0.8,
  shadeClose:true,
  anim:1,
  fixed:true,
  scrollbar:false,
  maxWidth:300,
  move:false,
});

moveOut-是否允许拖拽到窗口外

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

moveEnd-拖动完毕后的回调方法

类型:Function,默认:null;默认不会触发moveEnd,如果需要设定moveEnd:function(){}即可

layer.open({
  area:'auto',
  type:1,
  content:'啦啦啦啦，我是卖报的小画家',
  btn:['按钮一','按钮二'],
  closeBtn:2,
  shade:0.8,
  shadeClose:true,
  anim:1,
  fixed:true,
  scrollbar:false,
  maxWidth:300,
  moveOut:true,
  moveEnd:function(){
    alert(1);
  }
});

tips-方向和颜色

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

tipsMore-是否允许多个tips

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

layer.open({
  type: 4,
  content: ['内容aa', '#ida'],
});
layer.open({
  type: 4,
  content: ['内容', '#id'],
  tips: [1, '#c00'],
  tipsMore:true, 
});

下面来系统的了解下layer的回调方法，还是以layer.open为例

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){
    console.log(layero, index);
    layer.close(index); //如果设定了yes回调，需进行手工关闭
  }
});

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

类型:Function,默认:null;该回调只携带当前层索引一个参数,无需进行手工关闭;如果不想关闭return false即可

layer.open({
  content: '测试点击确定按钮回调',
  yes: function(index, layero){
    console.log(layero, index);
    layer.close(index);
  },
  cancel: function(index){ 
    if(confirm('确定要关闭么')){
      layer.close(index)
    }
    return false; 
  } 
});

end-层销毁后触发的回调

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

layer.open({
  content: '测试点击确定按钮回调',
  yes: function(index, layero){
    console.log(layero, index);
    layer.close(index);
  },
  cancel: function(index){ 
    if(confirm('确定要关闭么')){
      layer.close(index)
    }
    return false; 
  },
  end:function(){
    alert('我就这么离开了');
  } 
});

full/min/restore-分别代表最大化/最小化/还原后触发的回调

类型:Function,默认:null;携带一个参数,即当前层DOM

layer.open({
  type:1,
  content: '测试点击确定按钮回调',
  maxmin:true,
  yes: function(index, layero){
    console.log(layero, index);
    layer.close(index);
  },
  cancel: function(index){ 
    if(confirm('确定要关闭么')){
      layer.close(index)
    }
    return false; 
  },
  end:function(){
    alert('我就这么离开了');
  },
  full:function(){
    console.log('长大好辛苦，不过长个真好');
  },
  min:function(){
    console.log('看不见看不见我');
  },
  restore:function(layero){
    console.log(layero);
  },
});

全局设置

分类看完了弹框之后来看下弹框的整体设置,可以节省不少代码哦

初始化全局配置

layer.config(options)-初始化全局配置,这是一个可以重要也可以不重要的方法;重要的是它的权利很大,尤其在模块化加载layer时,它不仅可以配置一些诸如路径/加载的模块,甚至还可以决定整个弹层的默认参数;而说它不重要,是因为多数情况下你似乎不那么需要它;但你还是有必要认识下这位伙计

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

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

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

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

layer.config的作用远不止上述这样,它还可以配置层默认的基础参数

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

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

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

layer.ready(function(){
  layer.msg('很高兴一开场就见到你');
});

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

//每一种弹层调用方式都会返回一个index,此时只需要把获得的index赋予layer.close即可
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
layer.close(index);
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

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层

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

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

layer.style(index, {
  width: '1000px',
  top: '10px'
});

layer.title(title,index)-改变层的标题

使用方式:layer.title('标题变了',index)

layer.getChildFrame(selector,index)-获取iframe页的DOM

试图在当前页获取iframe页的DOM元素时可以用此方法,selector即iframe页的选择器

layer.open({
  type: 2,
  content: 'http://www.yonglibao.com',
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
    console.log(body.html()) //得到iframe页的body内容
    body.find('input').val('Hi，我是从父页来的')
  }
});

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

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

layer.open({
  type: 2,
  content: 'http://www.yonglibao.com',
  end:function(){
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index); //再执行关闭
  } 
});

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

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

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

不怎么常用,使用方式:layer.iframeSrc(index, 'http://www.baidu.com')

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

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

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

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

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

手机端背景固定的问题

弹框没有滚动条

success:function(){ //限制背景和弹框的touchmove事件
    $('.layui-layer-shade,.layui-layer').on('touchmove',function(e){
        e.preventDefault(); //阻止默认行为
    });   
},

弹框有滚动条

success:function(){
    var top = $(window).scrollTop();
    $('.layui-layer-shade').on('touchmove',function(e){
        e.preventDefault(); 
    });                                 
    $('.layui-layer').on('touchmove',function(e){                                    
        $('body').css({'top':-top+'px','position':'fixed'});
    });  
},

现在实现了弹框滚动背景也不动的效果，但是当我们会发现当我们关掉弹框的时候，body依然无法滑动，所以我们还需要在弹框关闭的时候把body的样式复原，并且保证滚动条停留在tan'kuan弹框弹出前的位置

var top = 0;
layer.open({
    success:function(){
        top = $(window).scrollTop();
        $('body').css({'top':-top+'px','position':'fixed'});
        $('.layui-layer-shade').on('touchmove',function(e){
            e.preventDefault(); 
        }); 
    },
    end:function(){                                
        $('body').css({'position':''});
        $(window).scrollTop(top);
    }
})

不知道大家有没有发现layer必须基于jquery，如果你没有提前引入jquery，她就会很happy的给你报错：

那么下面我来为大家介绍另一个文件

layer for mobile

我不知道大家有没有注意到,到目前为止,你引入的这个叫做layer.js的东东一直都是基于jquery的,这个在pc端没有什么问题,但是却会让移动端使用其他框架的同学们很忧伤;下面就让我们来了解另一个:layer.m.js

layer.m.js是主要针对移动端的,所以他比pc版layer要简洁很多-只提供一个核心调用方法,即:layer.open(options);各类型的层都可以借助下面高度灵活的参数接口对layer.open进行二次封装

参数

即核心接口:layer.open(options)中的options：

type - 设置弹层的类型

类型:Number,默认:0(0表示信息框,1表示页面层,2表示加载层)

content - 设置弹层内容

类型:String,为必选参数

title - 设置弹层标题

类型:String或Array,默认:空值,可以为字符串或者数组,为空则不显示

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
});

time - 控制自动关闭层所需秒数

类型:Number,默认不开启,支持整数和浮点数,单位为秒

style - 自定义层的样式

类型:String,非常实用

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
});

skin - 设定弹层显示风格

类型:String,目前支持footer(即底部对话框风格)/msg(普通提示)两种风格

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'footer',
});

className - 自定义一个css类

类型:String,用于自定义样式

layer.open({
  className: 'popuo-login',
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'footer',
});

btn - 按钮

类型:String/Array,不设置则不显示按钮,如果只需要一个按钮则btn:'按钮',如果有两个则:btn:['按钮一','按钮二']

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  btn:['按钮一','按钮二','按钮三'],
});

anim - 动画类型

类型:String/Boolean,可支持的支持动画配置:scale(默认)/up(从下往上弹出)/如果不开启动画设置false即可

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg' ,
  anim:'up',
});

shade - 控制遮罩展现

类型:String/Boolean,默认:true,该参数可允许你是否显示遮罩,并且定义遮罩风格

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  anim:'up',
  shade: 'background-color: rgba(0,0,0,.2);',
});

shadeClose

类型:Boolean,默认:true,是否点击遮罩时关闭层

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  shadeClose:false,
});

fixed - 是否固定层的位置

类型:Boolean,默认:true

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  shadeClose:false,
  fixed:false,
});

top - 控制层的纵坐标

类型:Number,默认:无,一般情况下不需要设置,因为层会始终垂直水平居中,只有当fixed:false时top才有效

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  shadeClose:false,
  fixed:false,
  top:'100px',
});

success - 层成功弹出层的回调

类型:Function,该回调参数返回一个参数为当前层元素对象

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  shadeClose:false,
  fixed:false,
  top:'100px',
  success: function(elem){
    console.log(elem);
  }
});

yes

类型:Function,点确定按钮触发的回调函数,返回一个参数为当前层的索引

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  shadeClose:false,
  fixed:false,
  top:'100px',
  success: function(elem){
    console.log(elem);
  },
  yes: function(index){
    alert('点击了是')
    layer.close(index)
  },  
});

no

类型:Function,点取消按钮触发的回调函数

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  shadeClose:false,
  fixed:false,
  top:'100px',
  success: function(elem){
    console.log(elem);
  },
  yes: function(index){
    alert('点击了是')
    layer.close(index)
  }, 
  no: function(index){
    alert('点击了否')
    layer.close(index)
  },
});

end

类型:Function,层彻底销毁后的回调函数

layer.open({
  title:['我是标题','background-color:#f00'],
  content:'我是内容',
  type:1,
  style: 'border:none; background-color:#78BA32; color:#fff;',
  skin:'msg',
  shadeClose:false,
  fixed:false,
  top:'100px',
  success: function(elem){
    console.log(elem);
  },
  yes: function(index){
    alert('点击了是')
    layer.close(index)
  }, 
  no: function(index){
    alert('点击了否')
    layer.close(index)
  },
});

其它内置方法/属性

layer.v

返回当前使用的layer mobile版本号

layer.close(index)

用于关闭特定层，index为该特定层的索引

layer.closeAll()

关闭页面所有layer的层

虽然layer.m.js功能比较少，但胜在不需要依赖于jquery