实现效果
HTML部分
<span class="text">点击打开 Dialog</span><!-- 警告框 --><div class="alert"><div class="header"><i>X</i> </div><div class="content">确认关闭</div><div class="btns"><button class="cancel">取消</button><button class="sure">确定</button></div></div><!-- 模态框 --><!-- <div class="modal"><div class="header">提示<i>X</i> </div><div class="body">这是一段信息</div><div class="footer"><button class="cancel">取消</button><button class="sure">确定</button></div></div> -->
CSS部分
<style>*{margin: 0;padding: 0;box-sizing: border-box;}body{position: relative;/* background-color: #7f7f7f; */font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;font-weight: 400;}span{color: #409eff;border: none;background: transparent;font-size: 18px;cursor: pointer;}span:hover{opacity: 0.7;}.modal{border-radius: 5px;margin: 80px auto;width: 500px;background-color: #fff;}.modal .header{display: flex;justify-content: space-between;height: 50px;padding: 20px 20px 10px 20px;}i{cursor: pointer;}.modal .body{padding: 30px 20px;height: 80px;color: #606266;font-size: 14px;word-break: break-all;}.modal .footer{text-align:right;padding: 10px 20px 20px 20px;height: 70px;}button{display: inline-block;width: 70px;height: 40px;background-color: #fff;border: 1px solid #dcdfe6;color: #606266;border-radius: 4px;cursor: pointer;}button.cancel:hover{border: 1px solid rgba(64, 158, 255, 0.1);background-color:rgba(64, 158, 255, 0.1);color: #409eff;}button.sure{color: #fff;background-color: #409eff;border-color: #409eff;margin-left: 20px;}button.sure:hover{opacity: 0.8;}i{font-style: normal;}.alert{display: none;position: absolute;left: 50%;top: 220px;transform: translateX(-50%);border-radius: 4px;width: 400px;background-color: #fff;}.alert .header{color: #606266;padding: 15px 20px 0 20px;height: 30px;text-align:right;}.alert .content{height: 50px;color: #606266;padding: 20px 20px 10px 20px;}.alert .btns{text-align: right;padding: 10px 20px 10px 20px;height: 50px;}.alert button{border-radius: 3px;width: 50px;height: 30px;}.alert .sure{margin-left: 15px;}</style>
JS部分
<script>// 1.创建模态框function Modal(title='',message=''){this.modalBox=document.createElement('div')this.modalBox.className='modal'this.modalBox.innerHTML=`<div class="modal"><div class="header">${title}<i>X</i> </div><div class="body">${message}</div><div class="footer"><button class="cancel">取消</button><button class="sure">确定</button></div></div>`// console.log(this.modalBox);}function closetwo(){document.querySelector('.alert').style.display='none'}// open方法Modal.prototype.open=function(){document.body.style.backgroundColor='#7f7f7f'document.body.append(this.modalBox)// 这里要使用箭头函数// document.querySelector('i').addEventListener('click',()=>{// this.close()// })document.querySelector('.footer .cancel').addEventListener('click',()=>{this.close()})document.querySelector('.footer .sure').addEventListener('click',()=>{this.close()})document.querySelector('.modal i').addEventListener('click',()=>{document.querySelector('.alert').style.display='block'document.querySelector('.alert i').addEventListener('click',()=>{closetwo()})document.querySelector('.alert .cancel').addEventListener('click',()=>{closetwo()})document.querySelector('.alert .sure').addEventListener('click',()=>{this.close()closetwo()})})}// close方法Modal.prototype.close=function(){document.body.style.backgroundColor='#fff'this.modalBox.remove()}document.querySelector('.text').addEventListener('click',function(){const text = new Modal('提示','这是一段信息')text.open()})</script>
