<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>jQuery 弹出层插件</title> <link rel="stylesheet" href="css/base.css" /> <style> button{ padding: 6px 8px; margin: 6px 10px;} .m-demo{ color: #0066FF; height: 300px; width: 600px;} </style> </head> <body> <div class="g-w" style="margin-top: 20px; height: 3000px;"> <button id="btn01">初体验</button> <button id="btn02">询问层</button> <button id="btn03">提示层</button> <button id="btn04">墨绿深蓝风</button> <button id="btn05">捕获页</button> <button id="btn06">页面层</button> <button id="btn07">自定页</button> <button id="btn08">tips层</button> <button id="btn09">iframe层</button> <button id="btn10">iframe窗</button> <button id="btn11">加载层</button> <button id="btn12">loading层</button> <button id="btn13">小tips</button> <button id="btn14">prompt层</button> <button id="btn15">tab层</button> <button id="btn16">相册层</button> </div> <div class="layer_notice" style="display: none; width: 300px; height: 200px; background-color: #FF6600;"></div> <script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script> <script type="text/javascript" src="js/layer/layer.js" ></script> <script> $(function() { $("#btn01").click(function(){ layer.alert('初体验'); }); $("#btn02").click(function(){ layer.confirm('你确定要删除这条语句吗?', { btn: ['确定','取消'] //按钮 }, function(){ layer.msg('是的,要删除', {icon: 1}); }, function(){ layer.msg('取消删除', { time: 20000, //20s后自动关闭 btn: ['明白了', '知道了'] }); }); }); $("#btn03").click(function(){ layer.msg('玩命提示中'); }); $("#btn04").click(function(){ layer.alert('墨绿风格,点击确认看深蓝', { skin: 'layui-layer-molv' //样式类名 ,closeBtn: 0 }, function(){ layer.alert('偶吧深蓝style', { skin: 'layui-layer-lan' ,closeBtn: 0 ,shift: 4 //动画类型 }); }); }); $("#btn05").click(function(){ layer.open({ type: 1, shade: false, title: false, //不显示标题 content: $('.layer_notice'), //捕获的元素 cancel: function(index){ layer.close(index); this.content.show(); this.content.css('display','none'); //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:1}); } }); }); $("#btn06").click(function(){ layer.open({ type: 1, skin: 'layui-layer-rim', //加上边框 area: ['420px', '240px'], //宽高 content: '<h3>阅谁问君诵,水落清香浮。</h3>' }); }); $("#btn07").click(function(){ layer.open({ type: 1, skin: 'm-demo', //样式类名 closeBtn: 1, //不显示关闭按钮 shift: 2, shadeClose: true, //开启遮罩关闭 content: '内容' }); }); $("#btn08").click(function(){ layer.tips('Hi,我是tips', '#btn05'); }); $("#btn09").click(function(){ //iframe层 layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: 'demo.html' //iframe的url }); }); $("#btn10").click(function(){ layer.open({ type: 2, title: false, closeBtn: 0, //不显示关闭按钮 shade: [0], area: ['340px', '215px'], offset: 'rb', //右下角弹出 time: 2000, //2秒后自动关闭 shift: 2, content: ['demo.html', 'no'], //iframe的url,no代表不显示滚动条 end: function(){ //此处用于演示 layer.open({ type: 2, title: '很多时候,我们想最大化看,比如像这个页面。', shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: ['893px', '600px'], content: 'demo2.html' }); } }); }); $("#btn11").click(function(){ var index = layer.load(2, {shade: false}); //0代表加载的风格,支持0-2 }); $("#btn12").click(function(){ var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); //alert(index); }); $("#btn13").click(function(){ //小tips layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '#btn13', { tips: [1, '#3595CC'], time: 4000 }); }); $("#btn14").click(function(){ layer.prompt({ title: '输入任何口令,并确认', formType: 1 //prompt风格,支持0-2 }, function(pass){ layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text){ layer.msg('演示完毕!您的口令:'+ pass +' 您最后写下了:'+ text); }); }); }); $("#btn15").click(function(){ layer.tab({ area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '内容1' }, { title: 'TAB2', content: '内容2' }, { title: 'TAB3', content: '内容3' }] }); }) $("#btn16").click(function(){ //这个功能还没有实现 $.getJSON('test/photos.json?v='+new Date, function(json){ layer.photos({ photos: json //格式见API文档手册页 ,shift: 5 //0-6的选择,指定弹出图片动画类型,默认随机 }); }); }); }); </script> </body> </html>
效果图: