<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<style>
.item{
color:red;
background-color: antiquewhite;
border:1px solid burlywood;
width:100px;
height:300px;
}
</style>
<body>
<button id="delete">删除</button>
<button id="login">登录</button>
<button id="add">新增</button>
</body>
<script>
function Modal(title='',message=''){
//创建div标签
//1.3
this.modalBox=document.createElement('div');
this.modalBox.className='modal';
this.modalBox.innerHTML=`
<div class="header">${title}<i>x</i></div>
<div class="body">${message}</div>
`
console.log(this.modalBox);
}
// new Modal('温馨提示','您都没有权限操作');
// new Modal('友情提示','您还没登录');
Modal.prototype.open=function(){
//判断页面是否有modal页面
const box=document.querySelector('.modal')
box && box.remove();
document.body.append(this.modalBox);
this.modalBox.querySelector('i').addEventListener('click',()=>{
this.close();
//这个需要用到箭头函数
})
};
Modal.prototype.close=function(){
this.modalBox.remove();
};
document.querySelector('#delete').addEventListener('click',()=>{
const del=new Modal('温馨提示','您没有权限删除');
del.open();
});
document.querySelector('#login').addEventListener('click',()=>{
const login=new Modal('友情提示','你没有注册呢');
login.open();
});
document.querySelector('#add').addEventListener('click',()=>{
const add=new Modal('友情提示','你没有新增权限');
add.open();
});
</script>
</html>
标签：模态,querySelector,modalBox,JS,面向对象,Modal,new,document,click From： https://www.cnblogs.com/tomcat2022/p/17674353.html