只要引用这个js就会页面加载完毕自动弹出提示框

 

IE浏览器不支持ES6语法， 此代码为翻译并修改过的，使用的bable网站翻译

 

(function (win) {
    // 生成遮罩和弹出层,返回弹出层DOM对象
    var createMsgBox = function createMsgBox() {
        // 添加遮罩层
        var shadow = document.createElement('div');
        shadow.classList.add('msgbox-shadow');
        document.body.appendChild(shadow);
        // 生成弹出框
        var msgDom = document.createElement('div');
        msgDom.classList.add('msgbox-modal');
        return msgDom;
    };
    // 显示弹出层
    var showMsgBox = function showMsgBox(msgboxDom) {
        document.body.style.overflow = 'hidden';
        document.body.appendChild(msgboxDom);
    };
    // 弹出框类
    var msgBox = {};
    // 删除(关闭)遮罩和弹出层
    msgBox.close = function () {
        var body = document.body;
        var modal = body.querySelectorAll('.msgbox-modal');
        var shadow = body.querySelectorAll('.msgbox-shadow');
        if (shadow != null) {
            for (var i = shadow.length - 1; i >= 0; i--) {
                shadow[i].parentNode.removeChild(shadow[i]);
            }
        }

        if (modal != null) {
            for (var i = modal.length - 1; i >= 0; i--) {
                modal[i].parentNode.removeChild(modal[i]);
            }
        }
        // 去掉body滚动条样式
        document.body.style.overflow = null;
    };
    // alert 弹出框
    // {msg:要提示的信息,字符串,[onClosed:关闭后执行方法],[style:primary,danger,success],[position:位置(top bottom)]}
    msgBox.alert = function (msg, onClosed, style, position) {
        // 删除可能存在的弹出框
        msgBox.close();
        // 生成新框并且加入到body直属
        var msgDom = createMsgBox();
        msgDom.innerHTML = "<div class=\"msgbox".concat(style || '', "msgbox-").concat(position || 'center', "\">").concat(msg || '', "\n  <span class=\"msgbox-btn msgbox-ok\">Ok</span></div>");
        // 绑定事件
        msgDom.querySelector('.msgbox-ok').onclick = function () {
            // 删除弹出框
            msgBox.close();
            // 执行关闭事件
            if (typeof onClosed == 'function')
                onClosed();
        };
        // 显示
        showMsgBox(msgDom);
    };

    // confirm 弹出框
    // { msg: 要提示的信息, 字符串, [callback(res)]:回调函数], [style: primary, danger, success], [position: 位置(top bottom)] }
    msgBox.confirm = function (msg, callback, style, position) {
        // 删除可能存在的弹出框
        msgBox.close();
        // 生成新框并且加入到body直属
        var msgDom = createMsgBox();
        msgDom.innerHTML = "<div class=\"msgbox".concat(style || '', "msgbox-").concat(position || 'center', "\">").concat(msg || '', "\n  <span class=\"msgbox-btn msgbox-ok\">Ok</span><span class=\"msgbox-btn msgbox-cancel\">Cancel</span></div>")
        // 绑定事件
        msgDom.querySelector('.msgbox-ok').onclick = function () {
            // 删除弹出框
            msgBox.close();
            // 结果传回1表示点击OK
            if (typeof callback == 'function')
                callback(1);
        };
        msgDom.querySelector('.msgbox-cancel').onclick = function () {
            // 删除弹出框
            msgBox.close();
            // 结果传回0表示点击取消
            if (typeof callback == 'function')
                callback(0);
        };
        // 显示
        showMsgBox(msgDom);
    };

    // prompt 弹出框
    // { msg: 要提示的信息, 字符串, [callback(res)]:回调函数], [style: primary, danger, success], [position: 位置(top bottom)] }
    msgBox.prompt = function (msg, callback, style, position) {
        // 删除可能存在的弹出框
        msgBox.close();
        // 生成新框并且加入到body直属
        var msgDom = createMsgBox();
        msgDom.innerHTML = "<div class=\"msgbox".concat(style || '', " msgbox-").concat(position || 'center', "\">").concat(msg || '', "<input class=\"msgbox-input\" type=\"text\"/>\n" +
            "<span class=\"msgbox-btn msgbox-ok\">Ok</span><span class=\"msgbox-btn msgbox-cancel\">Cancel</span></div>");
        // 绑定事件
        msgDom.querySelector('.msgbox-ok').onclick = function () {
            // 删除弹出框
            msgBox.close();
            // 输入传回
            if (typeof callback == 'function') {
                var _msg = msgDom.querySelector('.msgbox-input').value;
                callback(_msg);
            }
        };
        msgDom.querySelector('.msgbox-cancel').onclick = function () {
            // 删除弹出框
            msgBox.close();
            // 输入传回空字符串
            if (typeof callback == 'function')
                callback('');
        };
        // 显示
        showMsgBox(msgDom);
    };

    // 弹出自定义HTML片段
    // {msgboxhtml:自定义弹出层html片段,[onBefore:显示前执行],[onshow:显示后执行]}
    msgBox.show = function (msgboxhtml, onBefore, onShow) {
        // 删除可能存在的弹出框
        msgBox.close();
        // 生成新框并且加入到body直属
        var msgDom = createMsgBox();
        msgDom.innerHTML = msgboxhtml;
        //
        if (typeof onBefore == 'function')
            onBefore();
        // 显示
        showMsgBox(msgDom);
        //
        if (typeof onShow == 'function')
            onBefore();
    };

    // 引用名称可在此修改
    win.msgbox = msgBox;
})(window);

window.onload= function ShowCustom() {

    var innerhtml = "<div style=\"width:35%; margin:0 auto; height:350px;border:1px solid #999;position:absolute; top:30%; left:30%; background: #FFFFFF\">" +
        "<div style=\"background: #FFFFFF; width: 100 %; height:45px; font-size: 20px; line-height:40px; border: 1px solid #999; text-align:center;\">提示</div>" +
        "<div style=\"text-indent:40px;height:230px;font-size:16px;padding:20px;line-height:30px;\">" +
        "系统更新期间将会出现不可用情况，更新完毕后恢复。" +
        "</div>" +
        "<div style=\"background:#3C8DBC;width:60px;margin: 0 auto;height:35px;line-height:35px;text-align:center;color:#FFFFFF; margin-top:15px; font-size: 16px;\" onclick=\"msgbox.close()\">确定</div>" +
        " </div>";
    msgbox.show(innerhtml);
};

 

/*用于去掉BODY滚动条*/

.overflowhide {
    overflow: hidden;
}


/*遮罩*/

.msgbox-shadow {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .4;
    background-color: #000;
    z-index: 10000;
}


/*父层*/

.msgbox-modal {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 10001;
}


/*弹出框*/

.msgbox {
    position: relative;
    width: 450px;
    height: 200px;
    padding: 20px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    box-shadow: 2px 2px 16px #000;
}

.msgbox-center {
    align-self: center;
}

.msgbox-top {
    align-self: flex-start;
}

.msgbox-bottom {
    align-self: flex-end;
}


/*弹出框按钮*/

.msgbox-btn {
    position: absolute;
    bottom: 10px;
    width: 76px;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 5px 10px;
    background-color: #eee;
    user-select: none;
    font-size: 14px;
    color: #333;
    outline: 0;
    cursor: pointer;
}

.msgbox-ok {
    right: 10px;
}

.msgbox-cancel {
    right: 96px;
}

.msgbox-btn:hover {
    background-color: #6600FF;
    color: #ffffff;
}


/*prompt框的input*/

.msgbox-input {
    display: block;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 4px 8px;
    margin: 5px auto;
    width: 100%;
    border: 1px solid #999999;
    color: #333333;
    background-color: #ffffff;
    outline: 0;
}


/*PC屏*/

@media only screen and (min-width: 768px) {
    .msgbox {
        width: 360px;
    }
}