前端：HTML5中dialog弹窗标签

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