浏览器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>
参考