layui前端框架

項目中需要彈出層效果，使用了layui前端框架，主要使用了里面的彈出層特效（可以移動）

html代碼

要給這個標簽綁定click方法

<a href='javascript:;' data-method='offset' data-type='auto' class='showMean'>顯示</a>

點擊以后，顯示這個頁面

<div class="con-no-ma displayNo" id="con-no-ma">
   顯示頁面
</div>

一定要注意js，js必須這樣放

<link rel="stylesheet" href="../js/layui/css/layui.css">

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

js代碼

注意：這個方法要有地方觸發

function showMean() {
    layui.use('layer',function () {
        var $ = layui.jquery, layer = layui.layer;

        //觸發事件,這個相當於設置參數
        var active = {
            offset: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();

                layer.open({
                    title:"數據關聯",
                    type: 1,
                    offset: type, //具體配置參考：http://www.layui.com/doc/modules/layer.html#offset
                    id: 'LAY_demo'+type, //防止重復彈出
                    content: $("#con-no-ma"),  //在頁面新定義，然后通過id綁定到這
                    btn: '關閉全部',
                    area: ['1000px', '500px'],
                    btnAlign: 'c', //按鈕居中
                    shade: 0, //不顯示遮罩
                    //btn的方法
                    yes: function(){
                        layer.closeAll();                    
                    },
                    //右上角關閉按鈕的方法
                    cancel: function(){
                        layer.closeAll();                 
                    }
                });
            }
        };
       
        //給指定標簽綁定click事件
        $(' .showMean').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    })
}

 

參考地址：http://www.layui.com/demo/layer.html

下載地址：http://www.layui.com/