Github上只有一个test，所以最好还是到官网去学习，官网的示例写的很详尽，难得一见的设计思路和灵活性都极好的插件。下面是我自己test过的demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title></title> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/layer/layer.js"></script> <style type="text/css"> .popup1{ background: #eee; padding: 10px; font-size: 0.8rem; } .popup2{ background: #d12; width: 500px; height: 200px; } .cust{ width:500px; height:200px; padding:20px; } .page{ padding:20px; } </style> </head> <body> <div> <input type="button" id="alert1" value="默认警告框alert" /> <input type="button" id="alert2" value="带icon的警告框alert" /> <input type="button" id="msg1" value="默认提示框msg" /> <input type="button" id="msg2" value="带icon的提示框msg" /> <input type="button" id="confirm" value="确认框询问层confirm" /> <input type="button" id="catch" value="捕获窗口" /> <input type="button" id="page" value="页面层" /> <input type="button" id="cust" value="自定义层" /> <input type="button" id="tips" value="tips层" /> <input type="button" id="iframe1" value="iframe层" /> </div> <div class="popup1"> <p>我是条会跳来跳去的狗</p> </div> <script> $("#alert1").on("click", function(){ layer.alert("这是默认alert的结果"); }); $("#alert2").on("click", function(){ layer.alert("这是带icon的alert的结果",{icon: 1, shift: 4, title: "alert"}); }); $("#msg1").on("click", function(){ layer.msg("这是默认msg的结果"); }); $("#msg2").on("click", function(){ layer.msg("这是带icon的msg的结果",{icon: 1}); }); $("#confirm").on("click", function(){ layer.confirm('你是狗吗？', {btn: ['我是','我不是']}, function(){ layer.msg('哈哈哈你是狗', {icon: 1}); }, function(){ layer.msg('你确定你不是狗？', { time: 20000, //20s后自动关闭 btn: ['真的不是', '不玩了'] }); }); }); $("#catch").on("click", function(){ layer.open({ type: 1, shade: false, title: false, //不显示标题 content: $('.popup1'), //捕获的元素 cancel: function(index){ layer.close(index); this.content.show(); layer.msg('注意看，我又跳回去了', {time: 5000, icon:6}); } }); }); $("#page").on("click", function(){ layer.open({ type: 1, skin: 'layui-layer-rim', //加上边框 area: ['420px', '240px'], //宽高 content: '<div class="page">你真的是一条狗！！！</div>' }); }); $("#cust").on("click", function(){ layer.open({ type: 1, skin: 'popup2', //样式类名 closeBtn: 0, //不显示关闭按钮 shift: 2, shadeClose: true, //开启遮罩关闭 content: '<div class="cust">你真的是一条狗！！！</div>' }); }); $("#tips").on("click", function(){ layer.tips('Hi，我是tips', '#tips', {time: 1000}); }); $("#iframe1").on("click", function(){ layer.open({ type: 2, title: 'Baidu.com', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: 'http://www.baidu.com' //iframe的url }); }); </script> </body> </html>
官网
http://layer.layui.com/