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. 基础文之-----typeof 和 instanceof

    为了巩固基础,我会通过实例来详细说明,让我们一起搞懂 typeof 和 instanceof. <!DOCTYPE html> <html lang="en"&g ...

  2. 线程、GIL、协程

    1.多进程实现TCP服务端并发 1.之前我们学习了一个服务端对应一个客户端的操作,但是我们无法实现一个服务端对应多个客户端的操作.因此我们需要在pycharm的右上角点击倒三角,选择Edit Conf ...

  3. 电商网站Web自动化测试实战( 编写京东搜索脚本python+selenium框架)

    电商网站Web自动化测试实战( 编写京东搜索脚本) 1,打开京东页 京东首页地址:https://www.jd.com/,故进入京东首页如下: 2,打开浏览器开发者模式 定位元素前需先打开浏览器开发者 ...

  4. 树莓派开机启动VNC

    sudo nano /etc/init.d/vncserver #!/bin/sh ### BEGIN INIT INFO # Provides: vncserver # Required-Start ...

  5. ROS入门:服务

    服务端实现一个加法,将结果反馈给客户端 客户端将要计算的和的两个数发给服务的. 1.自定义服务数据 创建一个srv文件:AddTwoInts.srv int64 a int64 b --- int64 ...

  6. vue+.net入门级书签项目

    vu3+.net6 webApi 书签管理项目 前言 Gitee项目地址:https://gitee.com/zyplj/book-marks Github项目地址:https://github.co ...

  7. [NOI Online 提高组]冒泡排序

    题目 洛谷等许多 \(OJ\) 都有 思路 考试题,今日无意又做了一次 然后发现自己读错题了······ 其实询问时只要 \(k\) 轮排序后的逆序对个数并不需要真的对序列进行更改 很显然 \(k\) ...

  8. XView 架构升级之路

    作者:京东零售 胡本奎 一 背景 1 是什么 XView是一个透明的塑料袋(容器),基于通用的webview框架改造而来,通常用于大促弹窗等营销场景,展现形式如下图: 2 痛点 在实际的开发使用中XV ...

  9. LeetCode-432 全O(1)的数据结构

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/all-oone-data-structure 题目描述 请你设计一个用于存储字符串计数的数据结构 ...

  10. 【Java-01-3】java基础-基本语法(3)(数组,多维数组)

    import java.io.*; public class _07_Array { public static void main(String[] args) { // 1 定义数组 System ...