经典Dialog插件Layer

Github上只有一个test，所以最好还是到官网去学习，官网的示例写的很详尽，难得一见的设计思路和灵活性都极好的插件。下面是我自己test过的demo
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title></title>

    <script src="./js/jquery-1.11.3.min.js"></script>

    <script src="./js/layer/layer.js"></script>

    <style type="text/css">

        .popup1{

            background: #eee;

            padding: 10px;

            font-size: 0.8rem;

        }

        .popup2{

            background: #d12;

            width: 500px;

            height: 200px;

        }

        .cust{

            width:500px;

            height:200px;

            padding:20px;

        }

        .page{

            padding:20px;

        }

    </style>

</head>

<body>

    <div>

        <input type="button" id="alert1" value="默认警告框alert" />

        <input type="button" id="alert2" value="带icon的警告框alert" />

        <input type="button" id="msg1" value="默认提示框msg" />

        <input type="button" id="msg2" value="带icon的提示框msg" />

        <input type="button" id="confirm" value="确认框询问层confirm" />

        <input type="button" id="catch" value="捕获窗口" />

        <input type="button" id="page" value="页面层" />

        <input type="button" id="cust" value="自定义层" />

        <input type="button" id="tips" value="tips层" />

        <input type="button" id="iframe1" value="iframe层" />

    </div>

    <div class="popup1">

        <p>我是条会跳来跳去的狗</p>

    </div>

    <script>

        $("#alert1").on("click", function(){

            layer.alert("这是默认alert的结果");

        });

        $("#alert2").on("click", function(){

            layer.alert("这是带icon的alert的结果",{icon: 1, shift: 4, title: "alert"});

        });

        $("#msg1").on("click", function(){

            layer.msg("这是默认msg的结果");

        });

        $("#msg2").on("click", function(){

            layer.msg("这是带icon的msg的结果",{icon: 1});

        });

        $("#confirm").on("click", function(){

            layer.confirm('你是狗吗？', {btn: ['我是','我不是']}, function(){

                    layer.msg('哈哈哈你是狗', {icon: 1});

                }, function(){

                    layer.msg('你确定你不是狗？', {

                        time: 20000, //20s后自动关闭

                        btn: ['真的不是', '不玩了']

                    });

            });

        });

        $("#catch").on("click", function(){

            layer.open({

                type: 1,

                shade: false,

                title: false, //不显示标题

                content: $('.popup1'), //捕获的元素

                cancel: function(index){

                    layer.close(index);

                    this.content.show();

                    layer.msg('注意看，我又跳回去了', {time: 5000, icon:6});

                }

            });

        });

        $("#page").on("click", function(){

            layer.open({

                type: 1,

                skin: 'layui-layer-rim', //加上边框

                area: ['420px', '240px'], //宽高

                content: '<div class="page">你真的是一条狗！！！</div>'

            });

        });

        $("#cust").on("click", function(){

            layer.open({

                type: 1,

                skin: 'popup2', //样式类名

                closeBtn: 0, //不显示关闭按钮

                shift: 2,

                shadeClose: true, //开启遮罩关闭

                content: '<div class="cust">你真的是一条狗！！！</div>'

            });

        });

        $("#tips").on("click", function(){

            layer.tips('Hi，我是tips', '#tips', {time: 1000});

        });

        $("#iframe1").on("click", function(){

            layer.open({

                type: 2,

                title: 'Baidu.com',

                shadeClose: true,

                shade: 0.8,

                area: ['380px', '90%'],

                content: 'http://www.baidu.com' //iframe的url

            });

        });

    </script>

</body>

</html>
官网
http://layer.layui.com/
巴特西

经典Dialog插件Layer

最新文章

热门文章
