0
点赞
收藏
分享

微信扫一扫

前端:HTML5中dialog弹窗标签


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

1、实现效果

前端:HTML5中dialog弹窗标签_html5


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弹窗​​


举报

相关推荐

0 条评论