layui前端框架 - 爱码网

项目中需要弹出层效果，使用了layui前端框架，主要使用了里面的弹出层特效（可以移动）

html代码

要给这个标签绑定click方法

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

点击以后，显示这个页面

1 <div class="con-no-ma displayNo" id="con-no-ma">
2    显示页面
3 </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/