只要引用这个js就会页面加载完毕自动弹出提示框
2024-09-18 18:02:07
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;
}
}
最新文章
- 《转载》跟我学SpringMVC
- 我的runtime学习笔记
- extjs后自己写了一些见不得人的脚本
- Rdlc报表 数据汇总分组展示
- redshift编译遇到的错误（ubuntu14.04）
- js的一些复习
- H5 canvas绘制出现模糊的问题
- lua中奇葩用法
- ASP.NET MVC5 高级编程 第5章 表单和HTML辅助方法
- jQuery日期和时间插件（jquery-ui-timepicker-addon.js）中文破解版使用
- ORACLE AWR概述及生成AWR报告
- react.js 从零开始（四）React 属性和状态详解
- Windows 10 IoT Core环境配置中的那些坑
- WebApi零碎总结
- java面向对象基础(三)：对象转型和多态
- Spring Mvc + Maven + yuicompressor 使用 profile 来压缩 javascript ,css 文件; (十)
- Jquery为动态添加的未来元素绑定事件
- 【agc019C】Fountain Walk
- NO.3day 网络基础
- SQLITE3的锁以及事务