浏览器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弹窗