只要引用这个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;
}
}
只要引用这个js就会页面加载完毕自动弹出提示框的更多相关文章
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- yii 页面加载完成后弹出模态框
<?php $js = <<<JS $('#page-modal').modal('show');//页面加载完显示模态框 $('.modal-dialog').css('wi ...
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...
- js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- 页面加载完毕执行多个JS函数
通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.onload=firstFunctio ...
- 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
- js 判断iframe是否加载完毕
js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = fun ...
- jQuery页面加载完毕事件及jQuery与JavaScript的比较
1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...
随机推荐
- 基础文之-----typeof 和 instanceof
为了巩固基础,我会通过实例来详细说明,让我们一起搞懂 typeof 和 instanceof. <!DOCTYPE html> <html lang="en"&g ...
- 线程、GIL、协程
1.多进程实现TCP服务端并发 1.之前我们学习了一个服务端对应一个客户端的操作,但是我们无法实现一个服务端对应多个客户端的操作.因此我们需要在pycharm的右上角点击倒三角,选择Edit Conf ...
- 电商网站Web自动化测试实战( 编写京东搜索脚本python+selenium框架)
电商网站Web自动化测试实战( 编写京东搜索脚本) 1,打开京东页 京东首页地址:https://www.jd.com/,故进入京东首页如下: 2,打开浏览器开发者模式 定位元素前需先打开浏览器开发者 ...
- 树莓派开机启动VNC
sudo nano /etc/init.d/vncserver #!/bin/sh ### BEGIN INIT INFO # Provides: vncserver # Required-Start ...
- ROS入门:服务
服务端实现一个加法,将结果反馈给客户端 客户端将要计算的和的两个数发给服务的. 1.自定义服务数据 创建一个srv文件:AddTwoInts.srv int64 a int64 b --- int64 ...
- vue+.net入门级书签项目
vu3+.net6 webApi 书签管理项目 前言 Gitee项目地址:https://gitee.com/zyplj/book-marks Github项目地址:https://github.co ...
- [NOI Online 提高组]冒泡排序
题目 洛谷等许多 \(OJ\) 都有 思路 考试题,今日无意又做了一次 然后发现自己读错题了······ 其实询问时只要 \(k\) 轮排序后的逆序对个数并不需要真的对序列进行更改 很显然 \(k\) ...
- XView 架构升级之路
作者:京东零售 胡本奎 一 背景 1 是什么 XView是一个透明的塑料袋(容器),基于通用的webview框架改造而来,通常用于大促弹窗等营销场景,展现形式如下图: 2 痛点 在实际的开发使用中XV ...
- LeetCode-432 全O(1)的数据结构
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/all-oone-data-structure 题目描述 请你设计一个用于存储字符串计数的数据结构 ...
- 【Java-01-3】java基础-基本语法(3)(数组,多维数组)
import java.io.*; public class _07_Array { public static void main(String[] args) { // 1 定义数组 System ...