目的：练习面向对象写插件（模态框）
1.多个模态框一样的，而且每次点击都会出来一个，怎么做呢？
构造函数。把模态框封装一个构造函数model，每次new都会产出一个模态框，所以点击不同的按钮就是在做new模态框，实例化。
2.模态框有什么功能？打开功能（显示），关闭功能，而且每个模态框都包含着两个功能
-
open功能
-
close功能
问：open和close方法写到哪里？
构造函数Model的原型对象上，共享方法
BUG：多次点击会显示很多模态框
解决：准备open显示的时候，先判断页面中有没有modal盒子，有就移除，没有就添加
话不多数，上代码。
最主要的就是JS部分，由于代码比较短，这里将JS放在HTML写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../模态框封装css/模态框.css">
</head>
<body>
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示<i></i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
<script>
//1.Modal 构造函数封装 -模态框
function Modal(title = '', message = '') {
// console.log(title,message);
//创建Modal模态框盒子
//1.1 创建div标签
this.modalBox = document.createElement('div')
//1.2 给div标签添加类名为modal
this.modalBox.className = "modal"
//1.3 model盒子内部填充两个div标签，并且修改文字内容
this.modalBox.innerHTML = `
<div class="close"><i>X</i></div>
<div class="header">${title}</div>
<div class="body">${message}</div>
`
console.log(this.modalBox);
}
// new Modal("温馨提示","你没有权限删除")
// new Modal("友情提示","你还没有登录")
//2.给构造函数原型对象挂载open方法
Modal.prototype.open = function () {
//先来判断页面中是否有modal盒子，如果有就先删除，否则继续添加
const box=document.querySelector('.modal')
box&&box.remove()
//注意这个函数不要使用箭头函数，因为要用到this指向
//把刚才创建的modalBox显示到页面body中
document.body.append(this.modalBox)
//要等着盒子显示出来，就可以绑定点击事件了，所以close一定要在open中写
this.modalBox.querySelector('i').addEventListener('click',()=>{
//这个地方用箭头函数，此处this指向上一级，也就是实例对象
this.close();
})
}
//3.给构造函数原型对象挂载close方法
Modal.prototype.close = function () {
this.modalBox.remove()
}
//测试一下 点击 删除按钮
document.querySelector('#delete').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("温馨提示：", "您目前没有权限删除~");
//实例对象调用open方法
del.open()
})
//测试一下 点击 登录按钮
document.querySelector('#login').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("友情提示：", "您还没有注册呢~");
//实例对象调用open方法
del.open()
})
</script>
</body>
</html>Scss部分
.modal {
margin: 0 auto;
width: 300px;
height: 180px;
background-color: rgb(255, 255, 255);
border-radius: 3px;
display: flex;
flex-direction: column;
font-size: 22px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding: 20px 30px;
box-shadow: 2px 2px 2px 3px rgb(212, 211, 211);
.close{
width: 100%;
height:20px;
i{
display: block;
width: 20px;
height: 20px;
float: right;
cursor: pointer;
color: rgb(108, 104, 104);
}
}
.header {
width: 100%;
height: 30%;
line-height: 60px;
}
.body {
width: 100%;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
注意：这个小案例没有加遮罩，弹窗显示，还能点击页面中其他功能。不过点击归点击，页面始终最多显示一个弹窗。
也可以加个遮罩。open的时候，显示遮罩，close的时候，关闭遮罩，下面就是更改后的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../模态框封装css/模态框.css">
</head>
<body>
<div class="zhezhao"></div>
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示<i></i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
<script>
//获取一下遮罩
var zhezhao=document.querySelector(".zhezhao")
//1.Modal 构造函数封装 -模态框
function Modal(title = '', message = '') {
// console.log(title,message);
//创建Modal模态框盒子
//1.1 创建div标签
this.modalBox = document.createElement('div')
//1.2 给div标签添加类名为modal
this.modalBox.className = "modal"
//1.3 model盒子内部填充两个div标签，并且修改文字内容
this.modalBox.innerHTML = `
<div class="close"><i>X</i></div>
<div class="header">${title}</div>
<div class="body">${message}</div>
`
console.log(this.modalBox);
}
// new Modal("温馨提示","你没有权限删除")
// new Modal("友情提示","你还没有登录")
//2.给构造函数原型对象挂载open方法
Modal.prototype.open = function () {
//先来判断页面中是否有modal盒子，如果有就先删除，否则继续添加
const box=document.querySelector('.modal')
box&&box.remove()
//注意这个函数不要使用箭头函数，因为要用到this指向
//把刚才创建的modalBox显示到页面body中
document.body.append(this.modalBox)
//要等着盒子显示出来，就可以绑定点击事件了，所以close一定要在open中写
this.modalBox.querySelector('i').addEventListener('click',()=>{
//这个地方用箭头函数，此处this指向上一级，也就是实例对象
this.close();
})
}
//3.给构造函数原型对象挂载close方法
Modal.prototype.close = function () {
this.modalBox.remove()
zhezhao.style.display="none"
}
//测试一下 点击 删除按钮
document.querySelector('#delete').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("温馨提示：", "您目前没有权限删除~");
//实例对象调用open方法
del.open()
zhezhao.style.display="block"
})
//测试一下 点击 登录按钮
document.querySelector('#login').addEventListener('click', () => {
//先调用Modal构造函数
const del = new Modal("友情提示：", "您还没有注册呢~");
//实例对象调用open方法
del.open()
zhezhao.style.display="block"
})
</script>
</body>
</html>.modal {
margin: 0 auto;
width: 300px;
height: 180px;
position: relative;
background-color: rgb(255, 255, 255);
border-radius: 3px;
display: flex;
flex-direction: column;
font-size: 22px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding: 20px 30px;
box-shadow: 2px 2px 2px rgb(212, 211, 211);
z-index: 10000000;
.close{
width: 100%;
height:20px;
i{
display: block;
width: 20px;
height: 20px;
float: right;
cursor: pointer;
color: rgb(108, 104, 104);
}
}
.header {
width: 100%;
height: 30%;
line-height: 60px;
}
.body {
width: 100%;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
.zhezhao{
width: 100%;
height: 100%;
display: none;
position: absolute;
z-index: 999;
background-color: rgb(38, 38, 38);
opacity: 0.5;
}
至于效果可以手动复制粘贴试一下