原生JavaScript实现模态框的示例代码

2024-04-02 19:04:59 970人浏览泡泡鱼

摘要

目录原生js封装模态框示例效果代码原生js封装模态框最近需要一个模态框，然后一种是提示类的，一种是确认类型，我就想着再网上找一个然后修改一下，结果找到了，但是不深特别合适，我再次基

原生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部分


			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">
			
			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模态框的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 原生JavaScript实现模态框的示例代码

本文链接: https://www.lsjlt.com/news/153019.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

原生JavaScript实现模态框的示例代码

目录原生js封装模态框示例效果代码原生js封装模态框最近需要一个模态框，然后一种是提示类的，一种是确认类型，我就想着再网上找一个然后修改一下，结果找到了，但是不深特别合适，我再次基...

99+

2022-11-13
原生JavaScript怎么实现模态框

本篇内容介绍了“原生JavaScript怎么实现模态框”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！原生js封装模态框最近需要一个模态框，然...

99+

2023-07-02
golang原生实现JWT的示例代码

目录获取Token解析Token实际使用测试结果结语JWT（JSON Web Token）是一种基于JSON的安全令牌，可以用于在不同系统之间传输认证信息。在Go中实现JWT验证，可...

99+

2023-05-19

golang实现JWT golang JWT
Python实现动态二维码生成的示例代码

目录1.MyQR普通的二维码制作带背景图片的二维码制作带动图背景的二维码制作2.qrcode简单的二维码制作带背景图片的二维码制作大家好，我是辰哥~ 今天给大家分享两个制作二维码的P...

99+

2022-11-11
JavaScript实现拖动模态框的代码怎么写

这篇文章主要介绍“JavaScript实现拖动模态框的代码怎么写”，在日常操作中，相信很多人在JavaScript实现拖动模态框的代码怎么写问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript实...

99+

2023-07-02
原生JS实现拖拽排序的示例代码

目录HTML中的拖拽事件（drag & drop）Coding完整代码说到拖拽，应用场景不可谓不多。无论是打开电脑还是手机，第一眼望去的界面都是可拖拽的，靠拖拽实现...

99+

2022-12-08

JS实现拖拽排序 JS拖拽排序 JS 排序
原生JS实现H5转盘游戏的示例代码

目录1.基础的页面布局（index.html）1.1html布局1.2css布局（style.css）2.工具函数（用于调整概率）3.传参及接收值配置4.dom操作方法及具体逻辑处理...

99+

2022-11-13
django admin实现动态多选框表单的示例代码

背景借助django-admin，可以快速得到CRUD界面，但若需要创建多选标签字段时，需要对表单进行调整示例 model.py 一个tag（标签类），一个boo...

99+

2022-11-12
原生java代码实现码云第三方验证登录的示例代码

目录码云第三方验证登录一、在码云上创建应用1、在码云上注册一个账号，点击右上角设置2、创建应用3、填写资料4、获取到clientId以及client Secret二、在项目中实现第三...

99+

2022-11-12
React Native JSI实现RN与原生通信的示例代码

目录什么是JSI JSI有什么不同在iOS中使用JSI iOS端配置 RN端配置 js调用带参数的原生方法原生调用JS 原生调用带参数的JS方法在原生端调用js的函数参数总结...

99+

2022-11-12
基于原生JS实现分页效果的示例代码

这个只是一个分页的demo，主要是思路整理(很久之前项目用的东西) 分页实现的效果主要是左侧上一页右侧是下一页中间显示主要是超过5个显示省略号然后是可配置选项实现之后的...

99+

2022-11-13
基于PHP实现原生增删改查的示例代码

目录一、代码1、sql2、列表页(index.php)3、delete.php4、update.php5、create.php二、效果图一、代码 1、sql -- phpM...

99+

2022-11-13
怎么用ajax+textbox动态生成下拉框示例代码

这篇文章主要介绍“怎么用ajax+textbox动态生成下拉框示例代码”，在日常操作中，相信很多人在怎么用ajax+textbox动态生成下拉框示例代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操...

99+

2022-10-19
PHP实现生成二维码的示例代码

目录前言1、目前有2种类型的二维码2、用户扫描带场景值二维码时，可能推送以下两种事件3、创建二维码ticket4、临时二维码请求说明5、永久二维码请求说明6、临时二维码和永久二维码生...

99+

2022-11-13
Android实现动态高斯模糊效果示例代码

写在前面现在，越来越多的App里面使用了模糊效果，这种模糊效果称之为高斯模糊。大家都知道，在Android平台上进行模糊渲染是一个相当耗CPU也相当耗时的操作，...

99+

2022-06-06

示例高斯高斯模糊动态 Android
动态代理模拟实现aop的示例

AOP实现起来代码相当简单.主要核心是动态代理和反射.一.接口类：public interface MethodDao { public void sayHello(); }...

99+

2023-05-30

动态代理模拟实现aop 动
JavaScript实现外溢动态爱心的效果的示例代码

还在为节日送女朋友什么礼物而烦恼吗？最近用JavaScript制作了一个外溢动态爱心的效果，还可以在爱心上填写你想要的文字！快学习一下给自己女朋友也diy一个吧效果演示源码介绍...

99+

2022-11-13
C++模拟实现vector的示例代码

目录1.前言2.vector介绍3.vector模拟实现3.1 迭代器接口3.2 vector元素操作3. 3 构造与析构1.前言大家在学习C++的时候一定会学到STL（标准模板库...

99+

2022-11-13
jquery 实现密码框的显示与隐藏示例代码

复制代码代码如下: <html> <head> <script type="text/javascript" src="jquery-1.5.1.mi...

99+

2022-11-15

jquery 密码框显示隐藏
Vue模拟响应式原理底层代码实现的示例

目录1.Vue.js功能：2.Observer.js功能（数据劫持）：3.Compiler.js功能：4.Dep.js功能：5.Watcher.js功能：整体分析Vue的基本结构如下...

99+

2022-11-12