经典模块化前端框架LayUI——实现警告框弹出

1.经典模块化前端框架LayUI

https://www.layui.com/

导包

在上面链接下载之后，引入layui的包：

引包

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css"  media="all">

    <script src="<%=path%>/layui/layui.js" charset="utf-8"></script>

2.警告框弹出

layui.use('layer', function()
 {
     var $ = layui.jquery, layer = layui.layer;
     //触发事件
     var active = {

         notice: function(){
             //弹出一个警告公式框
             layer.open({
                 type: 1
                 ,title: false //不显示标题栏
                 ,closeBtn: false
                 ,area: '300px;'
                 ,shade: 0.8
                 ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                 ,btn: ['OK']
                 ,btnAlign: 'c'
                 ,moveType: 1 //拖拽模式，0或者1
                 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">安全警告！</div>'
                 ,success: function(layero){
                     var btn = layero.find('.layui-layer-btn');
                     btn.find('.layui-layer-btn0').attr({
                         target: '_blank'
                     });
                 }
             });
         }
     };

//点击按钮button，实现响应
     $('#layerDemo .layui-btn').on('click', function(){
         var othis = $(this), method = othis.data('method');
         active[method] ? active[method].call(this, othis) : '';
     });

      });

• #layerDemo为button所在的div 中的id号id="layerDemo"

• .layui-btn为<button>中的class号class="layui-btn"

         <div class="site-demo-button"  id="layerDemo" >
               <button name = "butt_submit" data-method="notice" class="layui-btn" >提交</button>
         </div>