<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教程。