一、案例要求
点击删除提示没有删除权限
点击登陆提示没有注册
点击×可以关闭提示框
二、css基础样式
<!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>面向对象封装消息提示</title>
<style>
.modal {
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;
}
.modal .header {
line-height: 40px;
padding: 0 10px;
position: relative;
font-size: 20px;
}
.modal .header i {
font-style: normal;
color: #999;
position: absolute;
right: 15px;
top: -2px;
cursor: pointer;
}
.modal .body {
text-align: center;
padding: 10px;
}
.modal .footer {
display: flex;
justify-content: flex-end;
padding: 10px;
}
.modal .footer a {
padding: 3px 8px;
background: #ccc;
text-decoration: none;
color: #fff;
border-radius: 2px;
margin-right: 10px;
font-size: 14px;
}
.modal .footer a.submit {
background-color: #369;
}
</style>
</head>
<body>
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示 <i>x</i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
//在这里插入script
</body>
</html>
三、script部分
<script>
//构造函数Model
function Model(title='',message=''){
this.div=document.createElement('div')
this.div.className='modal'
this.div.innerHTML=`
<div class="header">${title}<i>x</i></div>
<div class="body">${message}</div>
`
}
//给构造函数原型对象挂载open方法
Model.prototype.open=function(){
//如果页面中有div就删除否则继续添加
const box=document.querySelector('.modal')
box&&box.remove
//把刚才创建的div显示到页面中
document.body.append(this.div)//一定要加this,要让当前的实例对象展现在页面中
//一旦盒子显示就绑定×号
this.div.querySelector('i').addEventListener('click',()=>{
this.close()//这里一定要用箭头函数,使得this指向实例对象而不是i
})
}
//给构造函数原型对象挂载close方法
Model.prototype.close=function(){
document.body.remove()
}
//检验删除按钮
document.querySelector('#delete').addEventListener('click',()=>{
const del=new Model('温馨提示','您没有权限删除')
del.open()
})
//检验登陆按钮
document.querySelector('#login').addEventListener('click',()=>{
const log=new Model('友情提示','您还没登陆呢')
log.open()
})
</script>