对话框

模态对话框是网页上一种特殊类型的弹出框：一种会中断用户聚焦于自身的弹出式窗口。还有 一些弹出对话框的正当用例， 执行哪些操作模态对话框会强制用户关注特定内容，并暂时至少忽略 页面的其余部分。

对话框可以是模态的（只能与对话框中的内容互动），也可以是非模态的（仍然可以与对话框中的内容互动） 包含对话框以外的内容）。模态对话框会显示在页面内容的其余内容上方。其余 惯性，并且默认情况下会被半透明背景遮挡。

用于创建对话框的语义 HTML <dialog> 元素 包含语义、键盘交互以及 HTMLDialogElement 接口的所有属性和方法。

模态对话框

下面是一个模态 <dialog> 的示例。使用“Open modal dialog”（打开模态对话框）打开对话框按钮。打开对话框后，您可以通过三种方式关闭对话框：按 Esc 键、使用 一个具有 formmethod="dialog" 的按钮 （或者如果表单本身已设置 method="dialog"）以及 HTMLDialogElement.close() 方法。

HTMLDialogElement 有三种主要方法，以及从 HTMLElement 继承的所有方法。

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

因为此<dialog>是通过HTMLDialogElement.showModal()打开的 则是一个模态对话框。打开模态对话框会停用和遮挡除对话框本身之外的所有内容。如果您 将鼠标悬停在对话框以外的界面上，您会发现所有元素的行为都与 pointer-events: none; 类似 已设置；即使是打开对话框的按钮也不会对互动做出反应。

对话框打开后，焦点会移到对话框中。系统将焦点设置在对话框中按键盘导航顺序排列的第一个元素。 如果您反复按 tab 键，您会注意到，当模态对话框处于打开状态时，只有对话框中的内容才能获得焦点 打开。只要模态对话框处于打开状态，该对话框以外的所有内容都会停止活动。

当对话框关闭（无论是否模态）时，焦点将返回到打开对话框的元素。如果您通过编程方式 打开一个不基于用户操作的对话框，重新考虑。如果必须执行该操作，请确保焦点移回打开对话框之前的位置， 尤其是在用户未与对话框互动就关闭对话框的情况下。

全局属性 inert 可用于停用某个元素及其所有后代元素（任何活跃元素除外） 对话框。使用 showModal() 打开模态对话框时，无干扰或停用是免费的；属性 未明确设置。

对于遮挡对话框以外的所有内容的背景，您可以使用 ::backdrop 设置样式 伪元素。仅当使用 .showModal() 方法显示 <dialog> 时，背景才会显示。此伪元素 匹配所有背景，包括使用 FullScreen API 时显示的背景， 例如，在全屏模式下观看视频时，该视频的宽高比与屏幕或显示器的宽高比不同。

非模态对话框

HTMLDialogElement.show() 同样会打开一个对话框，但不会添加背景幕，也不会导致任何内容变为闲置状态。 按 Esc 键不会关闭非模态对话框。因此，更重要的是确保包含一个 方法 关闭非模态对话框的操作。采用这种方式时，如果离对话较近，焦点将位于相应元素上 打开对话框，这可能不是最佳用户体验。

虽然该规范并未正式要求提供关闭对话框的按钮，但可将其视为必要属性。Esc 键 将关闭模态对话框，但不会关闭非模态对话框。一个显眼的按钮能够接收焦点，这不仅改进了无障碍功能， 用户体验。

关闭对话框

关闭对话框时不需要 HTMLDialogElement.close() 方法。完全不需要 JavaScript。关闭<dialog> 不使用 JavaScript，请通过在 <form> 或 formmethod="dialog" 上设置 method="dialog" 来添加具有对话框方法的表单 按钮。

当用户通过 dialog 方法提交数据时，用户输入的数据的状态会保留下来。当存在提交事件时， 表单会进行限制条件验证（除非设置了 novalidate），即既不会清除也不会提交用户数据。 不含 JavaScript 的关闭按钮可编写为：

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

您可能已经注意到 autofocus 属性。 在此示例中为关闭 <button> 设置。在 <dialog> 内设置了 autofocus 属性的元素将不会接收 专注于网页加载（除非在加载网页时对话框可见）。但是，打开对话框后，它们将获得焦点。

默认情况下，当某个对话框打开时，除非另有其他元素被聚焦，否则对话框中的第一个可聚焦元素将获得焦点。 元素已设置 autofocus 属性。在关闭按钮上设置 autofocus 属性可确保 它会在对话框打开时获得焦点。但包含 <dialog> 中的 autofocus 都应该仔细斟酌系统会跳过序列中位于自动聚焦元素之前的所有元素。 我们将在重点课程中进一步讨论此属性。

HTMLDialogElement 接口包含一个 returnValue 属性。使用 method="dialog" 提交表单会将 returnValue 设置为用于提交按钮的 name（如果有） 提交表单。如果我们编写了 <button type="submit" name="toasty">close</button>，returnValue 将为 toasty。

打开对话框后，布尔值 open 属性 存在，表示对话框处于活动状态，可以与其交互。通过添加 open 属性来打开对话框时， 与使用 .show() 或 .showModal() 相比，此对话框将是无模态的。HTMLDialogElement.open 属性会返回 true 或 false，具体取决于对话框是否可用于互动，而非对话框是否为模态。

而 JavaScript 是打开对话框的首选方法，在网页加载时添加 open 属性，然后移除 与 .close() 搭配使用，有助于确保即使 JavaScript 不可用，对话框仍然可用。

其他详情

不使用 tabindex

被激活以打开对话框及其中包含的关闭按钮（以及其他内容）的元素 并且具有互动性<dialog> 元素不可互动，也不会获得焦点。请勿添加 tabindex 属性 对话框本身

ARIA 角色

隐式角色为 dialog。如果对话框 是一个确认窗口，用于传达需要确认或其他用户响应的重要消息，请设置 role="alertdialog"。 该对话框还应具有可供访问的名称。如果可见文本可以提供无障碍名称，请添加 aria-labelledby="idOfLabelingText"。

CSS 默认值

请注意，浏览器为 dialog 提供默认样式。Firefox、Chrome 和 Edge 集 color: CanvasText; background-color: Canvas; Safari 会在其用户代理样式表中设置 color: black; background-color: white;。color 是继承的 来自 dialog，而不是来自 body 或 :root，这可能是意外情况。background-color 属性不是继承的。

检查您的理解情况

测试您对对话框元素的知识掌握情况。