前端：HTML5中dialog弹窗标签

浏览器HTML5中自带的dialog弹窗标签，可以快速实现弹窗效果

1、实现效果

2、实现代码

<
    !-- 弹框 -->
    
<
    dialog id="dialog">
    
  <
    div>
    dialog<
    /div>
    
  <
    button id="btn-close">
    关闭<
    /button>
    
<
    /dialog>
    

<
    button id="btn-open">
    打开<
    /button>
    

<
    script>
    
   let btnOpen = document.querySelector("#btn-open");
    
   let btnClose = document.querySelector("#btn-close");
    
   let dialog = document.querySelector("#dialog");


   // 打开弹窗
   btnOpen.addEventListener("click", function () {
    
     dialog.show();

   }
    );


   // 关闭弹窗
   btnClose.addEventListener("click", function () {
    
     dialog.close();

   }
    );
    
 <
    /script>
    

参考

你可能不知道的dialog弹窗