最近总想着写一个模拟alert和confirm插件，代替原生的

msgbox-confirm

github：  https://github.com/tong-mikasa/msgbox-confirm

主要js代码，scss代码

(function($) {
    $.MsgBox = {
        Alert: function (title, msg, callback) {
            this._generateMsgboxHtml("alert", title, msg);
            //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "alter", title: title, msg: msg}));
            this._btnMsgOk(callback);
        },
        Confirm: function (title, msg, callback,cancelCallback) {
            this._generateMsgboxHtml("confirm", title, msg);
            //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "confirm", title: title, msg: msg}));
            this._btnMsgOk(callback);
            this._btnMsgNo(cancelCallback);
        },
        CustomizeConfirm: function (title, msg, leftButtonText,rightButtonText,callback,cancelCallback) {
            this._generateMsgboxHtml("confirm", title, msg,leftButtonText,rightButtonText);
            //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "confirm", title: title, msg: msg}));
            this._btnMsgOk(callback);
            this._btnMsgNo(cancelCallback);
        },
        _tplMsgHtm: $("#tpl_confirm_msgbox").html(),
        _btnMsgOk: function(callback) {
            var that = this;
            $("#msg_btn_ok").click(function () {
                that._removeMsgboxPopupWrap();
                if (callback && typeof (callback) == 'function') {
                    callback();
                }
            });
        },
        _btnMsgNo: function(cancelCallback) {
            var that = this;
            $("#msg_btn_no").click(function () {
                that._removeMsgboxPopupWrap();
                if (cancelCallback && typeof (cancelCallback) == 'function') {
                    cancelCallback();
                }
            });
        },
        _generateMsgboxHtml: function (type, title, msg,leftButtonText,rightButtonText) {

            var okButtonText = (typeof leftButtonText == "undefined") ? '确定' : leftButtonText
                , noButtonText = (typeof rightButtonText == "undefined")  ? '取消': rightButtonText;

            var strHtm ='<div class="confirm-msgbox-popup-wrap">' +
                '            <div class="confirm-mask-bg"></div>' +
                '            <div id="confirm_content_wrap">' +
                '                <div class="msg-in">' +
                '                    <div id="msg_header" class="text-center">' +
                '                        <span id="msg_title">'+title+'</span>' +
                '                    </div>' +
                '                    <div id="msg_msg" class="text-center">' + msg + '</div>' +
                '                    <div id="msg_btn_wrap" class="text-center">';

            if(type == "alert")
            {
                strHtm += '<span id="msg_btn_ok" class="msg-btn cursor-point col-full">'+okButtonText+'</span>';
            }

            if(type == "confirm"){
                strHtm += '<span id="msg_btn_ok" class="msg-btn cursor-point col-half">'+okButtonText+'</span>';
                strHtm +='<span id="msg_btn_no" class="msg-btn cursor-point col-half">'+noButtonText+'</span>';
            }

            strHtm +='           </div>' +
                '                </div>' +
                '            </div>' +
                '        </div>';

            this._removeMsgboxPopupWrap();
            $("body").append(strHtm);
        },
        _removeMsgboxPopupWrap: function(){
            $(".confirm-msgbox-popup-wrap").remove();
        }
    };
})(jQuery);

/*
<script type="text/x-handlebars-template" id="tpl_confirm_msgbox">
    <div class="confirm-msgbox-popup-wrap">
        <div class="confirm-mask-bg"></div>
        <div id="confirm_content_wrap">
            <div class="msg-in">
                <div id="msg_header" class="text-center">
                    <span id="msg_title">{{title}}</span>
                </div>
                <div id="msg_msg" class="text-center">
                    {{msg}}
                </div>
                <div id="msg_btn_wrap" class="text-center">

                    {{#ifCond type '==' 'alert'}}
                    <span id="msg_btn_ok" class="msg-btn cursor-point col-full">xxx</span>
                    {{/if}}

                    {{#ifCond type '==' 'confirm'}}
                    <span id="msg_btn_ok" class="msg-btn cursor-point col-half">xxx</span>
                    <span id="msg_btn_no" class="msg-btn cursor-point col-half">xxx</span>
                    {{/ifCond}}
                </div>
            </div>
        </div>
    </div>
</script>
*/

　　

.confirm-msgbox-popup-wrap{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9990;
    width: 100%;
    height: 100%;
    .col-full{
        width: 100%;
    }
    .col-half{
        width: 50%;
    }
    .cursor-point{
        cursor: pointer;
    }
    .confirm-mask-bg{
        position: absolute;
        z-index: 9991;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
    }
    #confirm_content_wrap{
        position: absolute;
        z-index: 9999;
        left: 50%;
        top: 50%;
        width: 400px;
        height: 250px;
        margin: -125px 0 0 -200px;

        .msg-in{
            background: #ffffff;
            border-radius: 14px;
            -webkit-border-radius: 14px;
            -moz-border-radius: 14px;
        }
        #msg_header{
            padding-top: 15px;
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
        }
        #msg_title{
            color: #333333;
            text-align: center;
            padding: 10px 0 10px;
            font-size: 20px;
            font-weight: bold;
        }
        #msg_msg{
            color: #000000;
            padding: 20px;
            vertical-align: middle;
            font-size: 16px;
            line-height: 1.4;
            max-height: 100px;
            overflow-y: auto;
        }
        #msg_btn_wrap{
            border-top: 1px solid #e6e6e5;
        }
        .msg-btn{
            padding-top: 12px;
            padding-bottom: 12px;
            display: inline-block;
            font-size: 15px;
            color: #ffffff;
            border: none;
            border-right: 1px solid #e6e6e5;

            &:last-child{
                border: none;
            }
        }
        #msg_btn_ok{
            color: #0079FF;
        }
        #msg_btn_no{
            color: rgba(0, 0, 0, 0.9);
        }
    }
}

@media screen and (max-width: 1000px) {
    .confirm-msgbox-popup-wrap{
        #confirm_content_wrap{
            left: 10%;
            right: 10%;
            width: auto;
            margin: -125px 0 0 0;

            #msg_title{
                font-size: 30px;
            }

            #msg_msg{
                padding: 30px;
                font-size: 28px;
            }
            .msg-btn{
                padding-top: 20px;
                padding-bottom: 20px;
                font-size: 28px;
            }
        }
    }
}