重构系统默认 alert() 方法

本文主要是介绍重构系统默认 alert() 方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

以下是针对移动端所设计的样式，如需pc端的请自行更改

window.onload = function(){
    window.alert = function(msg, callback) {
        var div = document.createElement("div");
        div.innerHTML = "<style type=\"text/css\">"
            + ".nbaMask { position: fixed; z-index:9999; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);}                                                                                                                                                                       "
            + ".dialogs2{}"
            + ".nbaMaskTransparent { position: fixed; z-index:9999; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            "
            + ".nbaDialog { position: fixed; z-index:9999; width: 85%; top: 45%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); background-color: #fff; text-align: center; border-radius:5px; overflow: hidden; opacity: 1; color: white;-webkit-transition: 0.3s;transition: 0.3s;}"
            + ".nbaDialog .nbaDialogHd { padding: .6rem .3rem .6rem .3rem;font-size:0.2rem}                                                                                                                                                                                                                         "
            + ".nbaDialog .nbaDialogHd.tiptitle{position: relative; padding: .5rem .3rem .1rem .3rem;}"
//            + ".nbaDialog .nbaDialogHd.tiptitle:after{content: \" \";position: absolute;left: 0;right: 0;bottom: 0;color: #e6e6e6;height: 1px;border-bottom: 1px solid #e6e6e6;transform: scaleY(0.5);}"
            + ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size:0.3rem; font-weight: 400; color:#000;}                                                                                                                                                                                                           "
            + ".nbaDialog .nbaDialogBd { padding: 0.5rem 0.27rem; font-size:0.3rem; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #7d7e80; }                                                                                                                                          "
            + ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 15px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          "
            + ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               "
            + ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #1989fa; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       "
            + ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             "
            + ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"
            + "</style>"
            + "<div id=\"dialogs2\" style=\"display: none\">"
            + "<div class=\"nbaMask\"></div>"
            + "<div class=\"nbaDialog\">"
            + "    <div class=\"nbaDialogHd tiptitle\">"
            + "        <strong class=\"nbaDialogTitle\">提示</strong>"
            + "    </div>"
            + "    <div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>"
            + "    <div class=\"nbaDialogFt\">"
            + "        <a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>"
            + "    </div></div></div>";
            
        document.body.appendChild(div);     
        var dialogs2 = document.getElementById("dialogs2");
        dialogs2.style.display = 'block';     
        var dialog_msg2 = document.getElementById("dialog_msg2");
        dialog_msg2.innerHTML = msg;
        var dialog_ok2 = document.getElementById("dialog_ok2");
        dialog_ok2.onclick = function() {
        dialogs2.style.display = 'none';
            if(callback){
                callback();
            }
        };
    };
}

这篇关于重构系统默认 alert() 方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！