Purpose: Practice writing object-oriented plug-ins (modal boxes)
1. Multiple modal boxes have the same appearance, and one will appear every time you click. How to do this?
Constructor . Encapsulate the modal box with a constructor model. Each new will produce a modal box, so clicking different buttons is creating a new modal box and instantiating it.
2. What functions does the modal box have? Turn on the function (display), turn off the function, and each modal box contains two functions
-
open function
-
close function
Question: Where are the open and close methods written?
Constructor Model's prototype object, shared method
BUG: Multiple clicks will display many modal boxes
Solution: When preparing to open the display, first determine whether there is a modal box in the page, remove it if it is, or add it if not.
Not much to say, just code.
The most important thing is the JS part. Since the code is relatively short, JS is written in HTML here.
<!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 part
.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;
}
}
Note: This small case does not add a mask, the pop-up window is displayed, and other functions on the page can be clicked. However, clicks are clicks, and the page will always display at most one pop-up window.
You can also add a mask. When open, the mask is displayed. When closed, the mask is closed. The following is the changed content.
<!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;
}
As for the effect, you can manually copy and paste it and try it.