一个layui的经典弹窗，点购买和关闭都有相应提示，样式和结束自己随便改改，但是得会一点JS，适用于所有弹窗，有技术的就改改就是你的内容和代码。
以下代码只是html演示,请根据需要修改,不会可联系站长
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>弹窗</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="https://www.layuiCDN.com/layui/css/layui.css" /> </head> <body> <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;"> <button data-method="buy" class="layui-btn">购买</button> </div> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js" charset="utf-8"></script> <script> layui.use('layer', function(){ var $ = layui.jquery, layer = layui.layer; var active = { buy: function(){ var that = this; layer.open({ type: 1 ,title: '购买' ,area: ['390px', '260px'] ,shade: 0 ,maxmin: true ,offset: [ Math.random()*($(window).height()-300) ,Math.random()*($(window).width()-390) ] ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">我们此后的征途是星辰大海 ^_^</div>' ,btn: ['购买', '关闭'] ,yes: function(){ layer.closeAll(); layer.msg('购买什么呢？', { icon: 5 }); } ,btn2: function(){ layer.closeAll(); layer.msg('你不购买看看吗？', { icon: 5 }); } ,zIndex: layer.zIndex ,success: function(layero){ layer.setTop(layero); } }); } }; $('#layerDemo .layui-btn').on('click', function(){ var othis = $(this), method = othis.data('method'); active[method] ? active[method].call(this, othis) : ''; }); }); </script> </body> </html>
