首页 > 代码库 > 基于layer封装的异步加载分部视图弹出层

基于layer封装的异步加载分部视图弹出层

2024-11-09 09:47:02   203人阅读

背景：之前一直用的artdialog，但是样式不是很好看，后来偶然看到layer,觉得不错，但是对于.net mvc来说，不能像artdialog一样弹出分部视图是很难受的。所以下面的方法就解决了。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="jquery-1.10.2.js"></script>
    <script src="layer/layer.js"></script>

    <script>
        layer.loading = function (url, opt) {
            var cid = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2
            $.ajax({
                url: url,
                success: function (content) {                  
                        layer.close(cid);
                        opt.content = content;
                        layer.open(opt);

                }
            });
        }

        layer.alertP = function (content, options, yes) {
            var type = typeof options === ‘function‘;
            if (type) yes = options;
            return layer.open($.extend({
                content: content,
                skin: ‘layui-phone-alert‘,
                title: ‘‘,
                closeBtn: 0,
                yes: yes
            }, type ? {} : options));
        }

        layer.confirmP = function (content, options, yes, cancel) {
            var type = typeof options === ‘function‘;
            if (type) {
                cancel = yes;
                yes = options;
            }
            return layer.confirm(content, $.extend({
                content: content,
                skin: ‘layui-phone-confirm‘,
                title: ‘‘,
                closeBtn: 0,
                yes: yes,
                btn2: cancel
            }, type ? {} : options));

        }

    </script>

    <script>
        //d1跟d6类似，只不过多了个type,但是d6Alert时不会关闭当前弹出层，d1会，所以我一般用d6(记得加padding，因为d6默认没有padding)，以P结尾的表示对手机端弹出的封装
        function d1() {
            layer.loading("part.html", {
                title: ‘异步加载！‘,
                maxWidth: 600,
                type: 1,
                success: function () {
                    alert(1);
                },
                btn: [‘确定‘, ‘取消‘],
                btn1: function (index, layero) {
                    //按钮【按钮一】的回调
                    layer.alert("弹窗内容，告知当前状态、")
                },
                btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }


            });

        }

        function d6() {
            layer.loading("part.html", {
                title: ‘异步加载！‘,
                maxWidth: 600,
                btn: [‘确定‘, ‘取消‘],
                btn1: function (index, layero) {
                    //按钮【按钮一】的回调
                    layer.alert("弹窗内容，告知当前状态、")
                },
                btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        }

        function d4() {

            layer.confirm(‘确定要删除吗？‘, { icon: 3 }, function () {

                layer.msg(‘删除成功‘, { time: 200000 });
            });

        }

        function d2() {
            layer.alert("弹窗内容，告知当前状态、")
        }

        function d3() {

            layer.alertP("layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案。");

        }

        function d5() {

            layer.confirmP(‘确定要删除吗？‘, function () {

                layer.msg(‘删除成功‘, { icon: 1 });
            });


        }

    </script>

</head>
<body>
    <button type="button" onclick="d2()">普通对话框</button>
    <button type="button" onclick="d4()">提示是否</button>
    <button type="button" onclick="d3()">手机对话框</button>
    <button type="button" onclick="d5()">手机对话框是否</button>


    <button type="button" onclick="d1()">异步提示框1</button>

    <button type="button" onclick="d6()">异步提示框2</button>
</body>
</html>

 

基于layer封装的异步加载分部视图弹出层


联系
我们