【js】javascript自制alert提示框

最近使用了了bootstrap的模态框，再使用jquery-ui的dialog对window的自带alert提示框封装使用，发现报栈溢出，因为jquery和jquery-ui都有个focus()方法，可能导致递归后栈溢出。

于是决定自己写个提示框的方法，效果图如下：

代码：

/*css部分*/
<style>
.msg-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: .4;
    z-index: 1050;
}
.msg-alert {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid #2d83ea;
    width: 400px;
    transform: translate(-50%,-50%);
    z-index: 1051;
}
.msg-header,.msg-body{
    border-bottom: 1px solid #eee;
    padding: 15px;
}
.msg-content {
    padding: 15px;
}
.msg-dismiss {
    cursor: pointer;
    background: transparent;
    float: right;
    border: 0;
    line-height: 1;
    font-size: 22px;
    color: #aaa;
    margin-top: -2px;
}
.msg-dismiss:hover {
    color: #bc1b1b;
}
.msg-footer {
    padding: 8px;
    text-align: right;
}
.msg-footer .msg-btnOk {
    background-color: #2f83ea;
    border: 1px solid #2f83ea;
    color: #fff;
    padding: 5px 15px;
}
.msg-footer .msg-btnOk:hover {
    background-color:#3f94fc;
}
.msg-title {
    margin: 0;
}
/*自制提示框 end*/
</style>

/*javascript部分*/
function alertMsg(text) {
    var bgHtml ="<div class='msg-bg'></div>";
    var msgAlertHtml = "<div class='msg-alertWrap'>" +
                            "<div class='msg-alert'>" +
                                "<div class='msg-header'><button class='msg-dismiss'><span>&times;</span></button><h4 class='msg-title'>温馨提示</h4></div>" +
                                "<div class='msg-body'>" +
                                    "<div class='msg-content'></div>" +
                                "</div>" +
                                "<div class='msg-footer'>" +
                                    "<button type='button' class='msg-btnOk'>确定</button>" +
                                "</div>" +
                            "</div>"+
                        "</div>";
    if ($(".msg-bg").length == 0) {
        $("body").append(bgHtml + msgAlertHtml);
    } else {
        $("body").append(msgAlertHtml);
    }

    $(".msg-alertWrap:last-child .msg-content").html(text);

    $(".msg-btnOk,.msg-dismiss").on("click", function () {
        $(this).parents(".msg-alertWrap").remove();
        if ($(".msg-alertWrap").length == 0) {
            $(".msg-bg").remove();
        }
    })
}

调用方法：
alertMsg(“你好”);
而且可以调用多次。