H5新标签

1.Dialog

H5新增标签Dialog

基本用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<dialog id="demo-modal">
<h3 class="modal-header">A native modal dialog box</h3>
<div class="modal-body">
<p>Finally, HTML has a native dialog box element! This is fantastic.</p>
<p>And a polyfill makes this usable today.</p>
</div>
<footer class="modal-footer">
<button id="close" onclick="closeDialog()" type="button">close</button>
</footer>
</dialog>
<button onclick="clickDialog()">按钮</button>
</body>
<script>
const modal = document.querySelector('dialog');
function clickDialog() {
// 使对话框出现(添加 `open` 属性)
modal.showModal();
}
function closeDialog() {
// 隐藏对话框(移除 `open` 属性)
modal.close();
}
</script>

showModal()方法可以给Dialog标签添加一个open属性,也就是使得Dialog可见。

close()方法关闭Dialog

1
2
3
<dialog open>
我是一个可见的dialog
</dialog>

评论