dialog html 标签

<dialog> 标签是 HTML5 中引入的一个新标签，用于在网页上创建模态对话框或非模态对话框。它提供了一种更方便、更易于使用的方式来创建弹出窗口、警告框、确认框等交互元素。

语法

<dialog> 标签是一个双标签，需要有开始标签和结束标签。以下是 <dialog> 标签的基本语法：

<dialog>
  </dialog>

属性

<dialog> 标签支持以下属性：

用法

创建模态对话框

要创建模态对话框，请设置 <dialog> 标签的 open 属性为 true。模态对话框会阻止用户与页面上的其他元素进行交互，直到对话框关闭。

<dialog open>
  <h1>这是一个模态对话框</h1>
  <p>请点击“确定”按钮关闭对话框。</p>
  <button onclick="this.parentNode.parentNode.close()">确定</button>
</dialog>

创建非模态对话框

要创建非模态对话框，请将 <dialog> 标签的 open 属性设置为 false。非模态对话框不会阻止用户与页面上的其他元素进行交互。

<dialog>
  <h1>这是一个非模态对话框</h1>
  <p>您可以继续与页面上的其他元素进行交互。</p>
</dialog>

关闭对话框

可以通过以下方式关闭对话框：

• 点击对话框上的关闭按钮。
• 使用 JavaScript 代码关闭对话框。
• 提交包含 method="dialog" 属性的表单。

<dialog open>
  <h1>这是一个模态对话框</h1>
  <p>请点击“确定”按钮关闭对话框。</p>
  <button onclick="this.parentNode.parentNode.close()">确定</button>
</dialog>

<script>
function closeDialog() {
  document.querySelector('dialog').close();
}
</script>

兼容性

<dialog> 标签在大多数现代浏览器中都得到支持，包括 Chrome、Firefox、Edge、Safari 和 Opera。

总结

<dialog> 标签是创建对话框的简便方法。它可以用于创建模态对话框和非模态对话框，并提供多种方式来关闭对话框。

附加信息

• HTML <dialog> 元素: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog
• 使用 <dialog> 元素: <移除了无效网址>

案例

• 模态登录框: <移除了无效网址>
• 确认框: <移除了无效网址>
• 警告框: <移除了无效网址>

练习

• 创建一个模态对话框，显示一条欢迎信息。
• 创建一个非模态对话框，显示用户当前所在位置。
• 创建一个确认框，询问用户是否要删除某个文件。