基于layer简单的弹层封装

/**
 * 产生长度为32的Guid字符串
 */
function getGuid32() {
    var rt_str = String.fromCharCode(65 + Math.floor(Math.random() * 26));
    for (i = 0; i < 31; ++i) {
        var num = Math.floor(Math.random() * (26 + 26 + 10));
        var ch_str;
        if (num < 10) {
            ch_str = num.toString();
        }
        else if (num < 10 + 26) {
            ch_str = String.fromCharCode(65 + num - 10);
        }
        else {
            ch_str = String.fromCharCode(97 + num - 10 - 26);
        }
        rt_str += ch_str;
    }
    return rt_str;
}

/**
 * 根据guid删除alert-div元素
 * @param Id guid
 */
function delAlertDivById(Id) {
    //等待layer自动处理好
    setTimeout(function () {
        var $alert_div = $(".alert-div[data-guid='" + Id + "']");
        if ($alert_div.length == 0) {
            clearInterval(id);
        }
        else {
            $alert_div.remove();
        }
    }, 1200);
    //上面这个延时数值很重要，因为layer没提供close的回调，所以只能如此等待
}

/**
 * 关闭弹层相关的清理工作
 * @param that myAlert对象
 */
function closeWork(that) {
    clearTimeout(that.autoCloseTimerId);
    layer.close(that.winId);
    delAlertDivById(that.uniqueId);
}

/**
 * 根据myAlert对象组件出jQuery弹窗对象
 * @param that myAlert对象
 */
function buildPopup(that) {
    var baseHtmlStr = "\
                    <div class='alert-div'>\
                        <div class='title'>\
                            <i class='fa icon'></i>\
                            <span class='text'></span>\
                            <i class='fa fa-close icon-close'></i>\
                        </div>\
                        <div class='content text-center'>\
                            <i class='fa fa-5x icon'></i>\
                            <span class='text1'></span>\
                            <span class='text2'></span>\
                        </div>\
                        <div class='control text-center'>\
                            <div class='btn btn-base'></div>\
                        </div>\
                    </div>\
                ";
    var $baseJq = $(baseHtmlStr);

    $baseJq.attr("data-guid", that.uniqueId);

    $baseJq.children(".title").children(".icon").addClass(that.titleIcon);
    $baseJq.children(".content").children(".icon").addClass(that.contentIcon);
    $baseJq.children(".title").children(".text").text(that.title);
    $baseJq.children(".content").children(".text1").text(that.text);
    $baseJq.children(".content").children(".text2").text(that.summary);
    $baseJq.children(".control").children(".btn-base").text(that.okBtnText);

    $baseJq.children(".title").children(".icon-close").click(that.canClose ? that.closeBtnFunction : function () { });
    $baseJq.children(".control").children(".btn-base").click(that.okBtnFunction);

    return $baseJq;
}

/**
 * 根据配置对象对于myAlert对象进行配置
 * @param dstObj 目标对象，myAlert对象
 * @param cfgObj 配置对象
 */
function defaultConfig(dstObj, cfgObj) {
    if (cfgObj == undefined) {
        cfgObj = new Object();
    }

    dstObj.uniqueId = cfgObj.uniqueId || getGuid32();

    dstObj.title = cfgObj.title || "提示";
    dstObj.text = cfgObj.text || "确认？";
    dstObj.summary = cfgObj.summary || "确认请按下方按钮";
    dstObj.okBtnText = cfgObj.okBtnText || "确认";

    dstObj.titleIcon = cfgObj.titleIcon || "fa-info-circle";
    dstObj.contentIcon = cfgObj.contentIcon || "fa-exclamation-circle";

    if (cfgObj.canClose == undefined) {
        dstObj.canClose = true;
    }
    else {
        dstObj.canClose = cfgObj.canClose;
    }
    dstObj.autoCloseTimer = cfgObj.autoCloseTimer || -1;

    dstObj.okBtnFunction = cfgObj.okBtnFunction || function () {
        closeWork(dstObj);
    };
    dstObj.closeBtnFunction = cfgObj.closeBtnFunction || function () {
        closeWork(dstObj);
    };
    dstObj.autoCloseTimerId = -1;
    dstObj.autoCloseFunction = cfgObj.autoCloseFunction || function () {
        closeWork(dstObj);
    };

    //存储layer返回的弹层id
    dstObj.winId = -1;
}

/**
 * myAlert对象构造函数
 * @param cfgObj myAlert配置对象
 */
function myAlert(cfgObj) {

    defaultConfig(this, cfgObj);

    //弹出弹层方法
    this.show = function () {
        if ($(".alert-div[data-guid='" + this.uniqueId + "']").length > 0) {
            return;
        }

        var $baseJq = buildPopup(this);

        $("body").append($baseJq);

        /**
         * 实际弹窗部分
         */
        var $popup_dom = $baseJq;
        this.winId = layer.open({
            id: this.uniqueId,
            type: 1,
            closeBtn: 0,
            title: false,
            content: $popup_dom,
            area: [$popup_dom.width(), $popup_dom.height()]
        });

        if (this.canClose) {
            if (this.autoCloseTimer > -1) {
                var that = this;
                this.autoCloseTimerId = setTimeout(function () {
                    that.autoCloseFunction();
                }, this.autoCloseTimer);
            }
        }
    };
}

 

 

.layui-layer {
    background-color: rgba(255, 255, 255, 0) !important;
}

.alert-div {
    position: relative;
    width: 740px;
    height: 480px;
    border: 1px solid #f2af6f;
    border-radius: 6px;
    font-family: 'Microsoft YaHei UI';
    margin: 0px;
    padding: 0px;
    background-color: white;
    overflow-y: hidden;
    overflow-x: hidden;
    display: none;
}

    .alert-div .title {
        background: linear-gradient(to bottom, #f2af6f 10%, #f3a02c 90%);
        font-size: 48px;
        height: 70px;
    }

        .alert-div .title .icon {
            margin: 0px 0px 10px 14px;
        }

        .alert-div .title .text {
            position: absolute;
            top: 9px;
            left: 67px;
            font-size: 34px;
            font-weight: bold;
        }

        .alert-div .title .icon-close {
            margin: 8px 12px 10px 14px;
            float: right;
        }

    .alert-div .content {
        height: 270px;
        padding-top: 50px;
    }

        .alert-div .content .icon {
            display: block;
        }

        .alert-div .content .text1 {
            color: black;
            font-size: 38px;
            margin-top: 40px;
            display: block;
        }

        .alert-div .content .text2 {
            color: #444;
            font-size: 24px;
            margin-top: 10px;
            display: block;
        }

    .alert-div .control {
        height: 140px;
    }

        .alert-div .control .btn-base {
            border: solid 1px #f2af6f;
            border-radius: 6px;
            font-size: 36px;
            font-weight: bold;
            padding-left: 40px;
            padding-right: 40px;
            margin-top: 35px;
            background: linear-gradient(to bottom, #f2af6f 10%, #f3a02c 90%);
        }

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="Content/bootstrap.css" />
    <link rel="stylesheet" href="Content/font-awesome.css" />
    <link rel="stylesheet" href="layer/skin/default/layer.css" />
    <link rel="stylesheet" href="Content/trml-myAlert.css" />
</head>
<body>
    <div class="container" style="margin-top: 20px;">
        <input type="button" class="btn btn-primary btn-test1" value="测试1" />
    </div>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="layer/layer.js"></script>
    <script src="Scripts/trml-myAlert-jq.js"></script>
    <script>
        $(".btn-test1").click(function () {
            var tstAlert = new myAlert({
                uniqueId: "gushihao",
                okBtnFunction: function () {
                    alert("哈哈");
                    closeWork(tstAlert);
                },
                autoCloseTimer: 10000,
                autoCloseFunction: function () {
                    alert("我要自动关闭了！");
                    closeWork(tstAlert);
                },
                closeBtnFunction: function () {
                    alert("你点击了关闭按钮");
                    closeWork(tstAlert);
                }
            });
            tstAlert.show();
        });
    </script>
</body>
</html>