<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layer-更懂你的web弹窗解决方案</title> <style> .none{display:none} .x_Popup { width: 330px; height: 120px; padding: 10px; } .x_Popup p i{vertical-align: middle;} /*demo-class是layer弹窗可以自定义的样式 通过skin来调用*/ .demo-class .layui-layer-btn a.layui-layer-btn0{ background: #279eb7; outline: none; border-color: #279eb7 } .demo-class .layui-layer-title { padding: 0 80px 0 10px; color: #fff; background-color: #279eb7; font-size: 16px; } </style> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> <script src="layer/layer.js"></script> </head> <body> <button id="Sign_out">点击</button> <div class="x_Popup Sign_out none"> <p class="f16 tc pt30 c333"><i class="iconfont juse f30"></i> 您确定要退出么？</p> </div> <script> $('#Sign_out').on('click', function(){ layer.open({ skin:'demo-class', //调用自定义样式 type: 1, //基本层类型 title:'提示', closeBtn: 1,//关闭按钮 shift:0,//动画 shadeClose: true,//是否点击遮罩关闭 maxWidth:380, content: ($(".Sign_out")), btn:["确定","取消"] }); }); </script> </body> </html>
这是layer官网弹层所有参数链接地址：http://layer.layui.com/api.html#tips