HTML原生modal弹窗

 <a onclick="dog.showModal()" > 打开</a> 
<dialog id="dog">
     <div class="win">
       <div class="mt10">
         <input class="int phoneInt" type="text" maxlength="11" placeholder="请输入手机号">
       </div>

       <div class="formItem gridXb mt10">
         <input class="int codeInt" type="text" placeholder="请输入验证码">
         <div class="codeBox">
           <span class="sendCode">发送验证码</span>
           <span class="djsNumber"></span>
         </div>
       </div>
      <div class="flex" style="gap: 10px">
        <button class="submitBtn" onclick="close2()" style="background: #fff;border: 1px solid #ccc;color: #333">关闭</button>
        <button class="submitBtn" onclick="login()">登录</button>
      </div>
      </div>

   </dialog>

  <script>
    function  close2(){
      dog.close()
    }
  </script>

<style>
    #dog {
      border-radius: 10px;
      border: 0;
      width: 80%;
    }
    #dog::backdrop {
      background: rgba(0, 0, 0, .5);
    }
    #dog .int {
      height: 50px;
      flex: 1;
      overflow: hidden;
      font-size: 16px;
      border: 0;
      border-bottom:1px solid #ccc ;
      width: 100%;
    }
    #dog input:focus-visible{
      outline: none;
    }
    #dog .formItem {
      display: flex;
      align-items: center;
    }
    #dog .submitBtn {
      line-height: 42px;
      background: #0C75FF;
      color: #fff;
      border-radius: 6px;
      width: 100%;
      font-size: 16px;
      margin-top: 24px;
      cursor: pointer;
      border: 0;
    }
    #dog .codeBox {
      width: 80px;
      text-align: center;
      position: absolute;
      right: 10px;
      cursor: pointer;
      color: #0C75FF;
    }
  </style>