HTML <dialog> 标签用于在网页上创建一个新的弹出对话框。这个标签代表一个对话框或其他像窗口这样的交互式组件。
<dialog> 元素使用一个名为 open 的布尔属性来激活元素并促进用户与其交互。
HTML 对话框是 HTML5 中引入的新标签。
<!DOCTYPE>
<html>
<body>
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p><q>I am so clever that sometimes I don't understand a single word of what I am saying.
</q> - <cite>Oscar Wilde</cite></p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
</body>
</html>输出：
HTML 对话框标签还支持 HTML 中的全局和事件属性。
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <dialog> | Yes | Yes | Yes | Yes | Yes |