Layer弹窗的用法：
<script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 --> <script src="layer.js的路径"></script>
Layer的open方法：
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> <script src="js/layer/layer.js" type="text/javascript"></script> </head> <body> <style> .test{width: 300px; height: 300px; background:#ddd; color: #ff0000; margin:200px auto; text-align: center; font-size: 16px; font-family:Microsoft YaHei;} fieldset{border: none; border-top: 1px solid #333;} </style> <div class="test" style=" color: #ff0000;"> <fieldset> <legend>这是弹窗测试页面</legend> <p>这是弹窗测试页面</p> <input type="button" value="点击触发弹窗" class="testlayer"> </fieldset> </div> <script> $(function(){ layer.config({ skin: 'layui-layer-lan' }) /*layer.open({ //skin: 'demo-class' });*/ $(".testlayer").on("click",function(){ layer.open({ type: 1, title:"测试", closeBtn:0, //右上角关闭按钮 //skin: 'layui-layer-rim', //加上边框 area: ['450px', '250px'], //宽高 anim:2,//弹出动画 btn:['确定购买','取消购买'],//按钮 content: '<p style=" text-align: center;">html内容</p>',//弹窗内容 //maxmin:true,//最大最小化按钮 resize:false,//是否允许拉伸 yes:function(index,layerdom){ layer.close(index); console.log("你点击了确定按钮"); }, btn2:function(index,layerdom){ console.log("你点击了取消按钮");//输出日志 //return false;//开启该代码可以禁止点击该按钮关闭 }, cancel:function(index,layerdom){ console.log("你点击了右上角的关闭按钮"); } }); }); }) </script> </body> </html>