一、案例展示
二、练习素材提供
<!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>v的面向对象封装消息提示</title>
<style>
.model {
width: 300px;
min-height: 100px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
position: fixed;
z-index: 999;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #fff;
}
.model .header {
line-height: 40px;
padding: 0 10px;
position: relative;
font-size: 20px;
}
.model .header i {
font-style: normal;
color: #999;
position: absolute;
right: 15px;
top: -2px;
cursor: pointer;
}
.model .body {
text-align: center;
padding: 10px;
}
.model .footer {
display: flex;
justify-content: flex-end;
padding: 10px;
}
.model .footer a {
padding: 3px 8px;
background: #ccc;
text-decoration: none;
color: #fff;
border-radius: 2px;
margin-right: 10px;
font-size: 14px;
}
.model .footer a.submit {
background-color: #369;
}
</style>
</head>
<body>
<button class="delete">删除</button>
<button class="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示 <i>x</i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
</body>
</html>
三、JS实现代码
//1.首先要写一个这个模态框的构造函数
function Model(title = '', message = '') {
this.title = title
this.message = message
this.modelbox = document.createElement('div')
this.modelbox.className = 'model'
this.modelbox.innerHTML = `<div class="modal">
<div class="header">${this.title} <i>x</i></div>
<div class="body">${this.message}</div>
</div>`
}
//2.为模态框添加一个打开弹出的方法
Model.prototype.open = function () {
const box = document.querySelector('.model')
box && box.remove()
document.body.appendChild(this.modelbox)
this.modelbox.querySelector('i').addEventListener('click', () => {
this.close()
})
}
//3.为模态框添加一个关闭方法
Model.prototype.close = function () {
document.body.removeChild(this.modelbox)
}
//4.给按钮添加点击事件
document.querySelector('.delete').addEventListener('click', function () {
const del = new Model('温馨提示', '您没有删除的权限')
del.open()
})
document.querySelector('.login').addEventListener('click', function () {
const login = new Model('友情提示', '您还没有登录哦')
login.open()
})
四、个别代码用意说明
1.box && box.remove() 为了防止多次点击按钮重复创建盒子，利用逻辑与来先判断页面中是否有模态框，无则添加，有则移除原来的模态框
2.在open方法里面添加点击事件，逻辑是只有当模态框打开了才会有关闭操作
