原生JavaScript实现模态框的示例代码
更新时间：2022年06月30日 08:41:05 作者：野生java研究僧
这篇文章主要为大家详细介绍了如何利用原生JavaScript封装实现模态框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js封装模态框
最近需要一个模态框，然后一种是提示类的，一种是确认类型，我就想着再网上找一个然后修改一下，结果找到了，但是不深特别合适，我再次基础上在做了修改，对功能有所增强，纯原生写的，没有任何依赖性，适应性比较强，值copy即可使用。
配置：可以在实例化时对options进行参数设置，达到自己想要的效果
示例效果
代码
HTML部分
<head> <meta charset="utf-8"> <title>弹出框</title> </head>
CSS部分
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* 遮罩层颜色 */
background: #bfbfbf;
opacity: 0.5;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: aliceblue;
border-radius: 5px;
z-index: 99;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.modal .modalTitle {
height: 50px;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #eeeeee;
padding: 0 16px;
}
.modalTitle .closeModal {
width: 20px;
height: 20px;
border-radius: 5px;
line-height: 20px;
text-align: center;
font-size: 14px;
cursor: pointer;
background-image: url('https://typroas.oss-cn-hangzhou.aliyuncs.com/typroaImg/close.png');
background-size: 100% 100%;
}
.modalTitleText {
margin: 0 auto;
font-size: 17px;
}
.modal .main {
box-sizing: border-box;
padding: 16px;
height: calc(100% - 80px);
}
.modal .footer {
height: 50px;
text-align: right;
box-sizing: border-box;
padding-right: 16px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.footer .btnLeft,
.footer .btnRight {
width: 120px;
height: 35px;
text-align: center;
line-height: 30px;
border: none;
border-radius: 0.2rem;
margin-left: 8px;
background-color: #dddddd;
}
.footer .btnOk {
width: 120px;
height: 35px;
text-align: center;
line-height: 30px;
border: none;
border-radius: 0.3rem;
background-color: #1d73d3;
margin: 0 auto;
font-size: 17px;
color: white;
}
.footer .btnLeft:hover,
.footer .btnRight:hover {
background-color: #1D73D3;
color: #FFFFFF;
}JS部分
/**
* 弹出框
* @param {Object} options 弹出框配置项
*/
function Modal(options) {
options = Object.assign({
lateRelease: options.lateRelease ? options.lateRelease : false, //是否开启延时关闭
lateReleaseTime: options.lateReleaseTime ? options.lateReleaseTime : 5000, // 延时关闭时间
isCreateOpen: options.isCreateOpen ? options.isCreateOpen : true, //是否创建完毕后就打开弹出框
type: options.type ? options.type : 'hint', // hint:提示框 confirm:确认框
isTopRightcancel: true, // 是否需要右上角小x取消按钮
modalTitle: options.modalTitle ? options.modalTitle : '温馨提示',
backgroundColor: options.backgroundColor ? options.backgroundColor : '#fff', // 背景颜色
mask: options.mask ? options.mask : true, //是否显示遮罩层,
content: options.content ? options.content : '', //弹框内容
cancelText: options.cancelText ? options.cancelText : '取消', //取消按钮文字
okText: options.okText ? options.okText : '确认', // 确认按钮文字,
width: options.width ? options.width : 500, //对话框的宽度
onCancel: options.onCancel ? options.onCancel : this.closeModal, //取消按钮回调，默认是关闭弹框
cancelCallBack: options.cancelCallBack ? options.cancelCallBack : () => {
console.log('你点击了取消');
}, //取消回调
onOkCallBack: options.onOkCallBack ? options.onOkCallBack : () => {
console.log('你点击了确认');
}, // 确认按钮回调
}, options);
this.options = options;
// 创建遮罩层
function createMask() {
let mask = document.createElement('div')
mask.className = 'mask';
document.body.appendChild(mask);
}
// 创建modal弹框
function createModal(type) {
let modal = document.createElement('div');
let modalTitleDom = document.createElement('div');
let main = document.createElement('div');
let footer = document.createElement('div');
let btnLeft;
let btnRight;
let btnOk;
let closeIcon;
if (type == 'hint') {
btnOk = document.createElement('button');
btnOk.className = 'btnOk';
} else if (type == 'confirm') {
btnLeft = document.createElement('button');
btnLeft.className = 'btnLeft';
btnRight = document.createElement('button');
btnRight.className = 'btnRight';
}
let {
modalTitle,
content,
cancelText,
okText,
width,
onCancel,
onOkCallBack,
backgroundColor,
cancelCallBack,
isTopRightcancel,
isCreateOpen
} = this.options;
modal.className = 'modal';
modal.style.width = width + 'px';
modal.style.backgroundColor = backgroundColor;
modalTitleDom.className = 'modalTitle'
modalTitleDom.innerHTML = `<span class="modalTitleText">${modalTitle}</span>`;
if (isTopRightcancel) {
closeIcon = document.createElement('span');
closeIcon.addEventListener('click', closeModal.bind(this));
closeIcon.className = 'closeModal';
modalTitleDom.appendChild(closeIcon);
}
main.className = 'main';
main.innerHTML = content;
footer.className = 'footer';
if (type == 'hint') {
btnOk.innerHTML = '确认';
footer.appendChild(btnOk);
onCancel = onCancel ? onCancel : this.closeModal;
btnOk.addEventListener('click', onCancel.bind(this));
} else if (type == 'confirm') {
btnLeft.innerHTML = '取消';
btnRight.innerHTML = '确认';
footer.appendChild(btnLeft);
footer.appendChild(btnRight);
onCancel = onCancel ? onCancel : this.closeModal;
btnLeft.addEventListener('click', onCancel.bind(this));
btnRight.addEventListener('click', onOkCallBack);
}
modal.appendChild(modalTitleDom);
modal.appendChild(main);
modal.appendChild(footer);
modal.className = 'modal';
this.options.onCancel = onCancel.bind(this);
document.body.appendChild(modal);
}
// 关闭弹框
function closeModal(ev) {
options.cancelCallBack();
let target = ev ? ev.path[2] : document.getElementsByClassName('modal')[0];
let {
mask
} = this.options
mask ? document.body.removeChild(document.querySelector('.mask')) : null;
document.body.removeChild(target);
}
/**
* 当设置默认打开的时候可手动调用该方法
*/
function openModal() {
this.init();
}
// 初始化
function init() {
let {
mask
} = this.options
mask ? createMask() : null
this.createModal(this.options.type);
}
Modal.prototype.init = init;
Modal.prototype.createModal = createModal;
Modal.prototype.closeModal = closeModal;
Modal.prototype.openModal = openModal;
// 执行初始化方法
if (this.options.isCreateOpen) {
this.init();
if (this.options.lateRelease) {
setTimeout(() => {
let modal = document.getElementsByClassName('modal')[0];
if(modal){
this.options.onCancel();
}
}, this.options.lateReleaseTime);
}
}
}
document.getElementById("btn").addEventListener('click', () => {
let modal = new Modal({
lateRelease: true,
modalTitle: '我是第二个',
content: `<p>日常开发中，秒杀下单、抢红包等等业务场景，都需要用到分布式锁。而Redis非常适合作为分布式锁使用。本文将分七个方案展开，跟大家探讨Redis分布式锁的正确使用方式。如果有不正确的地方，欢迎大家指出哈，一起学习一起进步。</p>`
})
// modal.closeModal();
// modal.openModal();
})完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出框</title>
</head>
<style type="text/css">
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* 遮罩层颜色 */
background: #bfbfbf;
opacity: 0.5;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: aliceblue;
border-radius: 5px;
z-index: 99;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.modal .modalTitle {
height: 50px;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #eeeeee;
padding: 0 16px;
}
.modalTitle .closeModal {
width: 20px;
height: 20px;
border-radius: 5px;
line-height: 20px;
text-align: center;
font-size: 14px;
cursor: pointer;
background-image: url('https://typroas.oss-cn-hangzhou.aliyuncs.com/typroaImg/close.png');
background-size: 100% 100%;
}
.modalTitleText {
margin: 0 auto;
font-size: 17px;
}
.modal .main {
box-sizing: border-box;
padding: 16px;
height: calc(100% - 80px);
}
.modal .footer {
height: 50px;
text-align: right;
box-sizing: border-box;
padding-right: 16px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.footer .btnLeft,
.footer .btnRight {
width: 120px;
height: 35px;
text-align: center;
line-height: 30px;
border: none;
border-radius: 0.2rem;
margin-left: 8px;
background-color: #dddddd;
}
.footer .btnOk {
width: 120px;
height: 35px;
text-align: center;
line-height: 30px;
border: none;
border-radius: 0.3rem;
background-color: #1d73d3;
margin: 0 auto;
font-size: 17px;
color: white;
}
.footer .btnLeft:hover,
.footer .btnRight:hover {
background-color: #1D73D3;
color: #FFFFFF;
}
</style>
<body>
<button type="button" id="btn">弹出</button>
<script type="text/javascript">
/**
* 弹出框
* @param {Object} options 弹出框配置项
*/
function Modal(options) {
options = Object.assign({
lateRelease: options.lateRelease ? options.lateRelease : false, //是否开启延时关闭
lateReleaseTime: options.lateReleaseTime ? options.lateReleaseTime : 5000, // 延时关闭时间
isCreateOpen: options.isCreateOpen ? options.isCreateOpen : true, //是否创建完毕后就打开弹出框
type: options.type ? options.type : 'hint', // hint:提示框 confirm:确认框
isTopRightcancel: true, // 是否需要右上角小x取消按钮
modalTitle: options.modalTitle ? options.modalTitle : '温馨提示',
backgroundColor: options.backgroundColor ? options.backgroundColor : '#fff', // 背景颜色
mask: options.mask ? options.mask : true, //是否显示遮罩层,
content: options.content ? options.content : '', //弹框内容
cancelText: options.cancelText ? options.cancelText : '取消', //取消按钮文字
okText: options.okText ? options.okText : '确认', // 确认按钮文字,
width: options.width ? options.width : 500, //对话框的宽度
onCancel: options.onCancel ? options.onCancel : this.closeModal, //取消按钮回调，默认是关闭弹框
cancelCallBack: options.cancelCallBack ? options.cancelCallBack : () => {
console.log('你点击了取消');
}, //取消回调
onOkCallBack: options.onOkCallBack ? options.onOkCallBack : () => {
console.log('你点击了确认');
}, // 确认按钮回调
}, options);
this.options = options;
// 创建遮罩层
function createMask() {
let mask = document.createElement('div')
mask.className = 'mask';
document.body.appendChild(mask);
}
// 创建modal弹框
function createModal(type) {
let modal = document.createElement('div');
let modalTitleDom = document.createElement('div');
let main = document.createElement('div');
let footer = document.createElement('div');
let btnLeft;
let btnRight;
let btnOk;
let closeIcon;
if (type == 'hint') {
btnOk = document.createElement('button');
btnOk.className = 'btnOk';
} else if (type == 'confirm') {
btnLeft = document.createElement('button');
btnLeft.className = 'btnLeft';
btnRight = document.createElement('button');
btnRight.className = 'btnRight';
}
let {
modalTitle,
content,
cancelText,
okText,
width,
onCancel,
onOkCallBack,
backgroundColor,
cancelCallBack,
isTopRightcancel,
isCreateOpen
} = this.options;
modal.className = 'modal';
modal.style.width = width + 'px';
modal.style.backgroundColor = backgroundColor;
modalTitleDom.className = 'modalTitle'
modalTitleDom.innerHTML = `<span class="modalTitleText">${modalTitle}</span>`;
if (isTopRightcancel) {
closeIcon = document.createElement('span');
closeIcon.addEventListener('click', closeModal.bind(this));
closeIcon.className = 'closeModal';
modalTitleDom.appendChild(closeIcon);
}
main.className = 'main';
main.innerHTML = content;
footer.className = 'footer';
if (type == 'hint') {
btnOk.innerHTML = '确认';
footer.appendChild(btnOk);
onCancel = onCancel ? onCancel : this.closeModal;
btnOk.addEventListener('click', onCancel.bind(this));
} else if (type == 'confirm') {
btnLeft.innerHTML = '取消';
btnRight.innerHTML = '确认';
footer.appendChild(btnLeft);
footer.appendChild(btnRight);
onCancel = onCancel ? onCancel : this.closeModal;
btnLeft.addEventListener('click', onCancel.bind(this));
btnRight.addEventListener('click', onOkCallBack);
}
modal.appendChild(modalTitleDom);
modal.appendChild(main);
modal.appendChild(footer);
modal.className = 'modal';
this.options.onCancel = onCancel.bind(this);
document.body.appendChild(modal);
}
// 关闭弹框
function closeModal(ev) {
options.cancelCallBack();
let target = ev ? ev.path[2] : document.getElementsByClassName('modal')[0];
let {
mask
} = this.options
mask ? document.body.removeChild(document.querySelector('.mask')) : null;
document.body.removeChild(target);
}
/**
* 当设置默认打开的时候可手动调用该方法
*/
function openModal() {
this.init();
}
// 初始化
function init() {
let {
mask
} = this.options
mask ? createMask() : null
this.createModal(this.options.type);
}
Modal.prototype.init = init;
Modal.prototype.createModal = createModal;
Modal.prototype.closeModal = closeModal;
Modal.prototype.openModal = openModal;
// 执行初始化方法
if (this.options.isCreateOpen) {
this.init();
if (this.options.lateRelease) {
setTimeout(() => {
let modal = document.getElementsByClassName('modal')[0];
if(modal){
this.options.onCancel();
}
}, this.options.lateReleaseTime);
}
}
}
document.getElementById("btn").addEventListener('click', () => {
let modal = new Modal({
lateRelease: true,
modalTitle: '我是第二个',
content: `<p>日常开发中，秒杀下单、抢红包等等业务场景，都需要用到分布式锁。而Redis非常适合作为分布式锁使用。本文将分七个方案展开，跟大家探讨Redis分布式锁的正确使用方式。如果有不正确的地方，欢迎大家指出哈，一起学习一起进步。</p>`
})
// modal.closeModal();
// modal.openModal();
})
</script>
</body>
</html>以上就是原生JavaScript实现模态框的示例代码的详细内容，更多关于JavaScript模态框的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序日期增加时间完成订单失效倒计时效果,在我们日常购物过程中经常会遇到这样的功能,本文通过示例代码给大家详细讲解,需要的朋友参考下吧2024-04-04
TypeError: Cannot set properties of
这篇文章主要介绍了TypeError: Cannot set properties of undefined (setting ‘xx‘)的问题,本文给大家分享完美解决方案,需要的朋友可以参考下2023-09-09
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法
本文主要基于我自己的框架代码案例，介绍其中文件上传插件File Input的使用，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
这篇文章主要介绍了微信小程序适配iphoneX的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
下面小编就为大家带来一篇Javascript 一些需要注意的细节(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了HTML5 JS压缩图片并获取图片BASE64编码上传方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
相信每位PHP程序员都知道，当PHP程序出现异常情况，如出现致命错误、超时或者不可知的逻辑错误导致程序中断，这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码，有需要的朋友们下面来一起看看吧。2016-10-10
本篇文章给大家总结了js保留两位小数的各种方法以及每种方法的实例代码分析，如果大家对此有需要，一起来学习下js保留两位小数的方法吧。2018-01-01
微信公众号平台接口开发 获取access_token过程解析
这篇文章主要介绍了微信公众号平台接口开发 获取access_token过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
最近做了一个项目，需要用子域名调用主域名下的一个现有的功能，于是想到了用jsonp来解决，在我们平常的项目中不乏有这种需求的朋友，于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下2012-12-12
最新评论