只要引用这个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 ...
随机推荐
- 02-逻辑仿真工具VCS使用
逻辑仿真工具VCS使用 1 Makefile执行VCS仿真 # Makefile for simulating the full_adder.v with the simulator VCS # -- ...
- Educational Codeforces Round 142 (Rated for Div. 2) A-D
比赛链接 A 题解 知识点:贪心. 代码 #include <bits/stdc++.h> using namespace std; using ll = long long; bool ...
- wsl2和ArchLinux的安装
版权声明:本文章参考了哔哩哔哩稿件BV1sW411v7VZ,如侵权请主动联系删除 1.Wsl2的安装 启用适用于 Linux 的 Windows 子系统 在终端运行:dism.exe /online ...
- GF_CLR初始用 - 正式版
参照:DeerGF_Wolong框架使用教程 与tackor老哥的踩坑日记所编写,第二次尝试,总结第一次经验重新来. 点击链接加入群聊[Gf_Wolong热更集合] 一. 部署 HybridCLR(W ...
- Java8Stream流
Stream流呢,以前我也有所了解,像一些面试题中也出现过,Java8的新特性,有一块就是这个Stream操作集合,而且在看一些项目中也使用的比较多.但总感觉自己学的一知半解,所以今天打算系统的过一下 ...
- 11月9日内容总结——单例模式的多种实现方式、pickle序列号模块和选课系统
目录 一.单例模式实现的多种方式 方式一:使用类 方法二:使用metaclass方式(自定义元类) 方法三:自定义双下new 方法四:基于模块的单例模式 二.pickle序列化模块 优势: 缺陷: 方 ...
- 计算机网络基础07 DNS概述
1 什么是DNS Domain Name System(域名系统),它是一个应用层的服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.当前,对于每一级域名长度的限制是 ...
- 图卷积神经网络分类的pytorch实现
图神经网络(GNN)目前的主流实现方式就是节点之间的信息汇聚,也就是类似于卷积网络的邻域加权和,比如图卷积网络(GCN).图注意力网络(GAT)等.下面根据GCN的实现原理使用Pytorch张量,和调 ...
- JZOJ 3281. 【GDOI2013】字母连接
\(\text{Solution}\) 一眼不会,限制有点多... 那就网络流 发下确实是很简单的建图 枚举起点集合 拆点后就很好满足限制了 \(\text{Code}\) #include < ...
- SpringCloud 源码学习笔记2——Feign声明式http客户端源码分析
系列文章目录和关于我 一丶Feign是什么 Feign是一种声明式. 模板化的HTTP客户端.在Spring Cloud中使用Feign,可以做到使用HTTP请求访问远程服务,就像调用本地方法一一样的 ...