丰富的线上&线下活动，深入探索云世界
做任务，得社区积分和周边
最真实的开发者用云体验
让每位学生受益于普惠算力
让创作激发创新
资深技术专家手把手带教
遇见技术追梦人
技术交流，直击现场
海量开发者使用工具、手册，免费下载
极速、全面、稳定、安全的开源镜像
开发手册、白皮书、案例集等实战精华
为开发者定制的Chrome浏览器插件
layer是一款近年来备受青睐的web弹层组件,它甚至兼容了包括IE6在内的所有主流浏览器;而且layer采用MIT开源许可证,将会永久性提供无偿服务.现在你肯定对layer充满了兴趣,首先,了解layer肯定避不开layui,layui是一个集合多个组件,例如:layer/laypage/laydate等的前端框架,和Bootstrap是同类别的,而layer一直是layui的代表作.如果舍弃layui单独使用layer的话，他需要依赖于jq1.8以上版本引入；废话不多说，直接能进入layer的学习吧
layer.msg()应该说是最简单和最自觉的,不仅占据很少的面积而且默认3秒后即自动消失,也因此让他成为程序员的最爱;
layer.msg('玩命提示中');layer.msg(content,options,end)-提示框可以有三个参数:弹框内容/弹框样式(弹框样式有很多,这里只是举个例子,具体的后面详细介绍)/关闭时调用的函数,eg:
layer.msg('玩命提示中...',{icon:1,//icon-图标,信息框和加载层的私有参数,类型:Number,默认:-1(信息框)/0(加载层);信息框默认不显示图标,想显示图标时默认皮肤可以传入0-6;如果是加载层可以传入0-2time: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);returnfalse//开启该代码可禁止点击该按钮关闭},},function(){alert('轻轻的我走了,正如我轻轻的来')});msg还可以与layer中很多其他类型的弹框一起使用
layer.alert('只想简单的提示');知道msg可以有那么多功能后肯定对alert的期待也不仅仅如此,solayer.alert也的确没有让大家失望.layer.alert(content,options,yes)-layer.alert同样有三个参数,第一个是弹出内容，第二个是样式设置,第三个是回调函数.下面来看个msg与alert的合作示例:
layer.alert('墨绿风格，点击确认看深蓝',{skin:'layui-layer-molv',//样式类名,自定义样式closeBtn:1,//是否显示关闭按钮anim:1,//动画类型btn:['重要','奇葩'],//按钮icon:6,//iconyes: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,有时还可能会定义颜色
类似系统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)-不仅支持传入基础参数还可以传入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);//得到valuelayer.close(index);});layer.tab(options)-tab层layer.tab(options)只单独定制了一个成员，即tab:[],这个好像没有什么可介绍的,简单粗暴看例子吧:
layer.tab({area:['500px','200px'],//每个tab标题最小80px最大260pxtab:[{title:'TAB1',content:'内容1'},{title:'TAB2',content:'内容2'},{title:'TAB3',content:'内容3'}]})相册层相册层,也称为图片查看器,它的出场动画从layer内置的动画类型中随机展现;photos支持传入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参数)});});直接从页面中获取
layer.open(options)-是layer的最原始核心方法,也是露脸率最高的方法;不管是使用哪种方式创建层都是走layer.open();创建任何类型的弹层都会返回一个当前层索引;options即是基础参数
varindex=layer.open({content:'test'});//index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数以layer.open为例来了解下layer中的参数:
基础参数主要指调用方法时用到的配置项,如:layer.open({content:''})/layer.msg('',{time:3})等;content和time即是基础参数,以键值形式存在;基础参数可合理应用于任何层类型中,大多数都是可选的
类型:Number,默认:0;layer提供了5种层类型,可传入的值有:0(信息框,默认)/1(页面层)/2(iframe层)/3(加载层)/4(tips层);若采用layer.open({type:1})方式调用,则type为必填项(信息框除外)
类型:String/Array/Boolean,默认:'信息';title支持三种类型的值,普通的字符串,如title:'我是标题'-只会改变标题文本;title:['文本','font-size:18px;']-数组第二项可以写任意css样式;不想显示标题栏可以title:false
类型:String/DOM/Array,默认:'';content可传入的值灵活多变,不仅可以是普通的html内容,还可以指定DOM,更可以随着type的不同而不同
//单个使用layer.open({skin:'demo-class'});//全局使用,即所有弹出层都默认采用,但是单个配置skin的优先级更高layer.config({skin:'demo-class'})area-宽高类型:String/Array,默认:'auto',即layer是宽高都自适应的;但当你只想定义宽度时,可以area:'500px',高度仍然是自适应的;当宽高都要定义时,可以area:['500px','300px']
类型:String/Array,默认:垂直水平居中;offset默认情况下不用设置;但如果不想垂直水平居中,可以进行以下赋值:
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(){},以此类推
//eg1layer.confirm('纳尼？',{btn:['按钮一','按钮二','按钮三'],//可以无限个按钮btn3:function(index,layero){}//按钮【按钮三】的回调},function(index,layero){},//按钮一的回调function(index){}//按钮二的回调);//eg2layer.open({content:'test',btn:['按钮一','按钮二','按钮三'],yes:function(index,layero){},//按钮一的回调btn2:function(index,layero){},//按钮二的回调btn3:function(index,layero){},//按钮三的回调cancel:function(){}//右上角关闭回调});btnAlign-按钮排列类型:String,默认:r;可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐;该参数可支持的赋值如下：
类型: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(贤心生日),一般用于解决和其它组件的层叠冲突
类型: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即可
类型: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']
类型: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;该回调只携带当前层索引一个参数,无需进行手工关闭;如果不想关闭returnfalse即可
layer.open({content:'测试点击确定按钮回调',yes:function(index,layero){console.log(layero,index);layer.close(index);},cancel:function(index){if(confirm('确定要关闭么')){layer.close(index)}returnfalse;}});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)}returnfalse;},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)}returnfalse;},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,也可以通过上述方式设定路径如果你是采用
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即可varindex=layer.open();varindex=layer.alert();varindex=layer.load();varindex=layer.tips();layer.close(index);//当你在iframe页面关闭自身时varindex=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)
试图在当前页获取iframe页的DOM元素时可以用此方法,selector即iframe页的选择器
非常强大的一个方法,虽然很少用,但当页面有很多layer窗口,需要像Window窗体那样点击某个窗口该窗体就置顶在上面,setTop就可以来轻松实现;它采用巧妙的逻辑使这种置顶的性能达到最优
success:function(){//限制背景和弹框的touchmove事件$('.layui-layer-shade,.layui-layer').on('touchmove',function(e){e.preventDefault();//阻止默认行为});},弹框有滚动条success:function(){vartop=$(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弹框弹出前的位置
vartop=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.js的东东一直都是基于jquery的,这个在pc端没有什么问题,但是却会让移动端使用其他框架的同学们很忧伤;下面就让我们来了解另一个:layer.m.js
layer.m.js是主要针对移动端的,所以他比pc版layer要简洁很多-只提供一个核心调用方法,即:layer.open(options);各类型的层都可以借助下面高度灵活的参数接口对layer.open进行二次封装
即核心接口:layer.open(options)中的options：
类型:Number,默认:0(0表示信息框,1表示页面层,2表示加载层)
类型:String,为必选参数
类型:String或Array,默认:空值,可以为字符串或者数组,为空则不显示
layer.open({title:['我是标题','background-color:#f00'],content:'我是内容',type:1,});time-控制自动关闭层所需秒数类型:Number,默认不开启,支持整数和浮点数,单位为秒
类型: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)},});