原生JavaScript实现模态框的示例代码
目录
- 原生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部分
/**
* 弹出框
* @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模态框的资料请关注我们其它相关文章！
相关推荐
-
js实现类bootstrap模态框动画
在pc端开发,模态框是一个很常用的插件,之前一直用的第三方插件,比如bootstrap,jQuery的模态框插件,最近还用了elementUI的.但是会发现其实动画效果都差不多,那么如何去实现这样一个动画效果呢? 模态框的构成 常见的模态框的结构我们很容易就可以看出,一个遮罩层,还有内容区.内容区主要是头部(包括标题,关闭按钮)和body部分(body中常常会有确认和取消按钮). 布局 1.背景要充满全屏,而且如果页面有滚动,当模态框弹出的时候是无法滚动的: 2.内容区要水平居中显示,至于
-
JavaScript实现模态框拖拽效果
在这里做一个模态框拖曳的案例,在这里要实现的功能有: 1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层. 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4.鼠标松开,可以停止拖动模态框移动. 实现思路为: 点击弹出层, 模态框和遮挡层就会显示出来display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标
-
js实现简单模态框实例
模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互. 类似于这样. 首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现.值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动.实现这样框图就是加了两个盒子 第一个盒子实现背景: 将整个页面覆盖(透明色) 第二个盒子实现交互框. 小编这边来实现一个最简单的交互框(代码量可能相对多了一点,主要是因为样式多了一点整体结构还是非常简单的) 代码如下: 模拟框最关键的一步就是
-
原生js实现简单的模态框示例
html部分: <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> &
-
JS实现图片点击后出现模态框效果
很多时候我们在浏览图片时,会发现点击图片后,会弹出一个被点击图片的放大图片浮在页面上,占满整个窗口.这就是图片模态框效果. 这个效果可以使用某些js库实现,如bpopupJs.但是在这里我们使用纯js实现,能够更好理解效果原理和实现方法. 一.实现思路 我们点击小图片之后,图片模态框出现,同时图片模态框上有一个关闭按钮和图片的标题. 因此,我们的实现思路就是: 图片模态框有大图片,关闭按钮,图片标题三部分. 将图片模态框隐藏,在点击小图片之后,模态框出现. 点击关闭按钮后,模态框隐藏. 二.HT
-
javascript实现移动的模态框效果
本文实例为大家分享了javascript实现移动的模态框效果的具体代码,供大家参考,具体内容如下 页面效果: 点击链接后,弹出登录模态框,点击关闭链接可以关闭模态框,鼠标在模态框标题区域按下后可以拖拽模态框,松开鼠标后,模态框停止移动 实现思路: 1.html.css搭建好页面,设置好模态框内容和样式后,将模态框隐藏:display: none;如果点击弹出模态框后,页面背景色发生改变,可以添加一个遮罩层,将遮罩层也先隐藏 2.给点击后弹出模态框的元素添加点击事件- - -onclick 事件处
-
JavaScript实现可拖动模态框
本文实例为大家分享了JavaScript实现可拖动模态框的具体代码,供大家参考,具体内容如下 代码: HTML代码部分: <style> * { margin: 0px; padding: 0px; } .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; cursor: pointer; } .login { display: none; width
-
原生JavaScript实现模态框的示例代码
目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&
-
原生JavaScript实现弹幕组件的示例代码
前言 如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类.这个类希望有如下属性和实例方法: 属性 el容器节点的选择器,容器节点应为绝对定位,设置好宽高 height 每条弹幕的高度 mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满 speed弹幕划过屏幕的时间 gapWidth后一条弹幕与前一条弹幕的距离 方法 pushData 添加弹幕元数据 addData持续加入弹幕 start开始调度弹幕 stop停止弹幕 r
-
bootstrap模态框远程示例代码分享
本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
jQuery将多条数据插入模态框的示例代码
//Bootstrap模态框(局部) <div class="modal fade" id="orderDetail"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal
-
Bootstrap 模态框(Modal)插件代码解析
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my
-
原生javascript AJAX 三级联动的实现代码
js 三级联动的实现代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生ajax</title> </head> <body> <select name="sel1"> <option value=""
-
angularjs模态框的使用代码实例
这篇文章主要介绍了angularjs模态框的使用代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 编写html页面 1.触发模态框的点击事件 <div> <button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal" data-tar
-
JavaScript中removeChild 方法开发示例代码
1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove
-
[js高手之路]单例模式实现模态框的示例
什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个.还有后台的数据库连接,一般都是保证一个连接等等.今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来. 我们先看下普通的构造函数加原型方式.下面这种是常见的方式 function Singleton (