前端：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弹窗

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！