经典Dialog插件Layer

最新推荐文章于 2021-05-29 05:14:14 发布

aizhanqian5077

最新推荐文章于 2021-05-29 05:14:14 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zcynine/p/5425423.html

版权

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/

转载于:https://www.cnblogs.com/zcynine/p/5425423.html

aizhanqian5077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经典Dialog插件Layer

Github上只有一个test，所以最好还是到官网去学习，官网的示例写的很详尽，难得一见的设计思路和灵活性都极好的插件。下面是我自己test过的demo<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewp...
复制链接

扫一扫