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;
}
}

只要引用这个js就会页面加载完毕自动弹出提示框的更多相关文章

  1. js实现的页面加载完毕之前loading提示效果

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  2. yii 页面加载完成后弹出模态框

    <?php $js = <<<JS $('#page-modal').modal('show');//页面加载完显示模态框 $('.modal-dialog').css('wi ...

  3. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  4. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  5. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  6. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  7. 页面加载完毕执行多个JS函数

    通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.onload=firstFunctio ...

  8. 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

  9. js 判断iframe是否加载完毕

      js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = fun ...

  10. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

随机推荐

  1. 常用的函数式接口_supplier接口-接口练习

    常用的函数式接口_supplier接口 常用的函数式接口java.util.function.SuppLier<T>接口仅包含一个无参的方法:T get().用来获取一个泛型参数指定类型的 ...

  2. java入门与进阶-P1.1+P1.2

    计算机与编程语言 计算机如何解决问题 !-- 首先计算机他是不知道自己需要去做什么的,它需要按照你所说的步骤一步一步进行直到结束 "请给我一杯水" 1.转身走到厨房; 2.找到一个 ...

  3. 使用字节流丢读取中文的问题-Reader类

    使用字节流丢读取中文的问题 当使用字节流读取文本文件时,可能会有一个小问题.就是遇到中文字符时,可能不会显示完整的字符,那是因为一个中文字符可能占用多个字节存储.所以Java提供一些字符流类,以字符为 ...

  4. 【一句话】Java8后abstract class和interface的区别

    首先一句话: Java8后(1)interface支持default和static方法有实现,abstract class依然是抽象方法和非抽象方法,(2)可同时实现多个interface,(3)但成 ...

  5. [代码审计基础 03]-RCE-fork,system,execve

    RCE-fork,system,execve 简单来讲: 数据流进入了控制流 紧紧抓住输入 不同数据层的交汇处,往往是漏洞点 远程代码执行 PHP eval() assert() preg_reple ...

  6. 【KAWAKO】MNN-将推理程序交叉编译成RK1126的可执行文件

    目录 得到RK交叉编译器 将交叉编译器添加进path 对MNN进行交叉编译 对自己的工程进行交叉编译 将编译好的可执行文件和.so动态库放入板子中运行 得到RK交叉编译器 主要用到这两个,一个gcc的 ...

  7. JZOJ 2022.02.10【提高组】模拟总结

    \(\text{简要题解}\) \(\text{GDOI2012}\) 的题 不得不说当年的题做起来真的很不爽 整体看起来就是数据结构+博弈论+宽搜+背包dp优化 考场上 \(T1\) 十分钟解决过了 ...

  8. Android实现仿微信实时语音对讲功能|与女友游戏开黑

    与亲朋好友一起玩在线游戏,如果游戏中有实时语音对讲能力就可以拉进玩家之间的距离,添加更多乐趣.我们以经典的中国象棋为例,开发在线语音对讲象棋.本文主要涉及如下几个点: 在线游戏的规则,本文以中国象棋为 ...

  9. 理解JS函数之call,apply,bind

    前言 在 JavaScript 中,apply.bind 和 call 是三个重要的函数,它们都是 Function.prototype 的方法.这些函数可以让我们动态地改变函数的 this 值,或者 ...

  10. DrCush_0813_风湿性疾病, 药物和新冠指南

    风湿性疾病, 药物和新冠指南 原文网址: https://rheumnow.com/news/rheumatic-diseases-drugs-and-covid-19-guidelines Jack ...