<dialog>表示一个对话框或其他交互式组件,比如一个可关闭警告、对话框、检查器或者窗口。

<!DOCTYPE html>
<html>
<head>
<title>对话框案例-HTML教程www.xuandaima.com</title>
</head>
<body>
<script>
function dianji() {
var obj=document.getElementsByTagName("dialog")[0];
obj.open = false;
};
</script>
<button onclick="dianji()">隐藏对话框</button>
<p><b>注意:</b>IE不支持 dialog 标签。</p>
<dialog open>我是对话框</dialog>
</body>
</html>




<dialog></dialog>
| 属性 | 值 | 描述 |
|---|---|---|
open![]() | open | 指示这个对话框是激活的和能互动的。当没有设置 open 属性时,对话框不应该显示给用户。推荐使用 .show() 或 .showModal() 方法来渲染对话框,而不是使用 open 属性。tabindex 属性不能被使用在 <dialog> 元素上。 |
使用show方法显示对话框

<script>
function dianji() {
var obj=document.getElementsByTagName("dialog")[0];
obj.show();
};
</script>
<button onclick="dianji()">显示对话框</button>
<p><b>注意:</b>IE不支持 dialog 标签。</p>
<dialog>我是对话框</dialog>使用showModal方法显示对话框,如果使用该方法,可用键盘Esc键关闭对话框。

<script>
function dianji() {
var obj=document.getElementsByTagName("dialog")[0];
obj.showModal();
};
</script>
<button onclick="dianji()">显示对话框</button>
<p><b>注意:</b>IE不支持 dialog 标签,使用ESC键关闭对话框。</p>
<dialog>我是对话框</dialog><dialog>标签支持HTML 全局属性
<dialog>标签支持HTML 事件属性
如果想了解更多请移步html教程。