Web 弹层组件-layer

最新推荐文章于 2023-07-11 18:31:37 发布

江浙沪柯蓝

最新推荐文章于 2023-07-11 18:31:37 发布

阅读量1.1w

点赞数 1

文章标签： Web-弹层组件 layer

本文链接：https://blog.csdn.net/zhaobw831/article/details/77888008

版权

Web 弹层组件layer

介绍

layer是一款优秀的基于jQuery的web弹层组件，目前GitHub 上Stars5000+。

文件的引用

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

源码示例：

以下代码只是部分功能，详细可参阅官网文档，地址已在本文开头部分给出

Web 弹层组件layer.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body .skin1 {
            width: 200px;
            height: 100px;
            background-color: red;
            color: yellow;
        }

        body .skin2 {
            width: 420px;
            height: 240px;
            background-color: #81BA25;
            box-shadow: none;
            color: #fff;
        }
    </style>
    <script src="jquery/jquery-3.2.1.js"></script>
    <script src="layer-3.0.3/layer.js"></script>
    <script>
        //信息框
        function testMsgbox(type) {
            switch (type) {
                case 1:
                    layer.alert('见到你真的很高兴', {
                        icon: 6
                    });
                    break;
                case 2:
                    layer.msg('hello');
                    break;
                case 3:
                    layer.msg('继续？', {
                        time: 0, //不自动关闭
                        btn: ['A', 'B', 'C'],
                        yes: function (index) {
                            layer.close(index);
                            layer.msg('最后一次', {
                                icon: 6,
                                btn: ['D', 'E', 'F']
                            });
                        },
                        btn3: function (index) {
                            layer.close(index);
                            layer.msg('最后一次', {
                                icon: 6,
                                btn: ['G', 'H', 'I']
                            });
                        }
                    });
                    break;
                case 4:
                    layer.msg('不开心。。', {
                        icon: 5
                    });
                    break;
                case 5:
                    layer.msg('玩命卖萌中', function () {
                        //关闭后的操作
                        layer.msg('after close');
                    });
                    break;
                default:
                    break;
            }
        }

        //页面层/iframe层
        function testPages(type) {
            switch (type) {
                case 1:
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        shadeClose: true,
                        skin: 'skin2',
                        content: '自定义html'
                    })
                    break;
                case 2:
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: '504px',
                        skin: 'layui-layer-nobg',
                        shadeClose: true,
                        content: $('#img')
                    });
                    break;
                case 3:
                    //iframe层-父子操作
                    layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: 'layer-child.html'
                    });
                    break;
                case 4:
                    //iframe层-多媒体
                    layer.open({
                        type: 2,
                        title: false,
                        area: ['630px', '360px'],
                        shade: 0.8,
                        closeBtn: 0,
                        shadeClose: true,
                        content: '//player.youku.com/embed/XMjY3MzgzODg0'
                    });
                    break;
                case 5:
                    //iframe层-禁滚动条
                    layer.open({
                        type: 2,
                        area: ['360px', '500px'],
                        skin: 'layui-layer-rim', //加上边框
                        content: ['mobile/', 'no']
                    });
                    break;
                default:
                    break;
            }
        }
    </script>
</head>

<body>
    <h1>信息框</h1>
    <a href="#" onclick="testMsgbox(1)">信息框1</a>&nbsp;&nbsp;
    <a href="#" onclick="testMsgbox(2)">信息框2</a>&nbsp;&nbsp;
    <a href="#" onclick="testMsgbox(3)">信息框3</a>&nbsp;&nbsp;
    <a href="#" onclick="testMsgbox(4)">信息框4</a>&nbsp;&nbsp;
    <a href="#" onclick="testMsgbox(5)">信息框5</a>
    <br>
    <h1>页面层/iframe层</h1>
    <div id="img" style="display:none">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504798530155&di=f381e3a0ff76553ffdc37f98c9af599a&imgtype=jpg&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ffcfaaf51f3deb48f856b141ef91f3a292cf578eb.jpg"
            style="width:504px;height:315px;">
    </div>

    <a href="# " onclick="testPages(1) ">页面层-自定义</a>&nbsp;&nbsp;
    <a href="# " onclick="testPages(2) ">图片</a>&nbsp;&nbsp;
    <a href="# " onclick="testPages(3) ">iframe层-父子操作</a>&nbsp;&nbsp;
    <a href="# " onclick="testPages(4) ">iframe层-多媒体</a>&nbsp;&nbsp;
    <a href="# " onclick="testPages(5) ">iframe层-禁滚动条</a>
    <div id="divParent">父窗口DIV</div>

</body>

</html>

layer-child.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery/jquery-3.2.1.js"></script>
    <script src="layer-3.0.3/layer.js"></script>
    <script>
        $(function () {
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            //给父页面传值
            $('#btnChild').on('click', function () {
                parent.$('#divParent').html('我被改变了');
                parent.layer.tips('Look here', '#divParent', {
                    time: 5000
                });
                parent.layer.close(index);
            });
        });
    </script>
</head>

<body>
    <button id="btnChild">传值给父窗口</button>
</body>

</html>