layer弹窗插件操作方法详解

2024-02-23 12:30:03 43

要弹窗显示的内容

//弹窗后两秒自动关闭 layer.open({ content:'通过style设置你想要的样式', style:'background-color:#09C1FF;color:#fff;border:none;', time:2 }); //弹窗后点击关闭 layer.open({ btn:['关闭'], content:'内容' })

//初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容',{ icon:1, skin:'layer-ext-moon'//该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅 }) //询问框 layer.confirm('您是如何看待前端开发？',{ btn:['重要','奇葩']//按钮 },function(){ layer.msg('的确很重要',{icon:1}); },function(){ layer.msg('也可以这样',{ time:20000,//20s后自动关闭 btn:['明白了','知道了'] }); }); //提示层 layer.msg('玩命提示中'); //墨绿深蓝风 layer.alert('墨绿风格，点击确认看深蓝',{ skin:'layui-layer-molv'//样式类名 ,closeBtn:0 },function(){ layer.alert('偶吧深蓝style',{ skin:'layui-layer-lan' ,closeBtn:0 ,shift:4//动画类型 }); }); //捕获页 layer.open({ type:1, shade:false, title:false,//不显示标题 content:$('.layer_notice'),//捕获的元素 cancel:function(index){ layer.close(index); this.content.show(); layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构',{time:5000,icon:6}); } }); //页面层 layer.open({ type:1, skin:'layui-layer-rim',//加上边框 area:['420px','240px'],//宽高 content:'html内容' }); //自定页 layer.open({ type:1, skin:'layui-layer-demo',//样式类名 closeBtn:0,//不显示关闭按钮 shift:2, shadeClose:true,//开启遮罩关闭 content:'内容' }); //tips层 layer.tips('Hi，我是tips','吸附元素选择器，如#id'); //iframe层 layer.open({ type:2, title:'layermobile页', shadeClose:true, shade:0.8, area:['380px','90%'], content:'http://layer.layui.com/mobile/'//iframe的url }); //iframe窗 layer.open({ type:2, title:false, closeBtn:0,//不显示关闭按钮 shade:[0], area:['340px','215px'], offset:'rb',//右下角弹出 time:2000,//2秒后自动关闭 shift:2, content:['test/guodu.html','no'],//iframe的url，no代表不显示滚动条 end:function(){//此处用于演示 layer.open({ type:2, title:'很多时候，我们想最大化看，比如像这个页面。', shadeClose:true, shade:false, maxmin:true,//开启最大化最小化按钮 area:['893px','600px'], content:'http://fly.layui.com/' }); } }); //加载层 varindex=layer.load(0,{shade:false});//0代表加载的风格，支持0-2 //loading层 varindex=layer.load(1,{ shade:[0.1,'#fff']//0.1透明度的白色背景 }); //小tips layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。','吸附元素选择器',{ tips:[1,'#3595CC'], time:4000 }); //prompt层 layer.prompt({ title:'输入任何口令，并确认', formType:1//prompt风格，支持0-2 },function(pass){ layer.prompt({title:'随便写点啥，并确认',formType:2},function(text){ layer.msg('演示完毕！您的口令：'+pass+'您最后写下了：'+text); }); }); //tab层 layer.tab({ area:['600px','300px'], tab:[{ title:'TAB1', content:'内容1' },{ title:'TAB2', content:'内容2' },{ title:'TAB3', content:'内容3' }] }); //相册层 $.getJSON('test/photos.json?v='+newDate,function(json){ layer.photos({ photos:json//格式见API文档手册页 ,shift:5//0-6的选择，指定弹出图片动画类型，默认随机 }); });

layer弹窗插件操作方法详解

热门推荐

随机推荐