html+css+js实现dialog对话框

实现效果

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>