VOCABULARY / 词条

模态对话框

Modal Dialog

加入比较＋

交互模式粒度：组件modal-dialog · v0.1.0

覆盖在主内容之上的对话框，它使系统进入一种特殊模式：在用户明确处理该对话框之前，主内容被禁用、不可交互。

虚构的 FIELDNOTES 应用界面被遮罩压暗，中央是一张带标题、一行正文、主次两个按钮和关闭控件的对话框卡片。

识别特征

对话框外的内容被遮罩且不可操作
打开时焦点进入对话框，Tab 只在其内部循环
有明确的关闭途径，关闭后焦点回到触发处

概念边界

不是所有弹出层都是模态：非模态对话框、气泡提示与渐进披露的展开都允许用户继续操作页面。判断标准是页面其余部分是否在对话框关闭前保持惰性；只要背景仍可点击或可获得焦点，就不应称为模态。

什么时候考虑它

需要在不可逆操作前阻止关键错误
继续用户自己发起的流程必须先取得一项必要信息
需要把复杂流程切成必须逐步完成的小步骤

什么时候慎用

内容与用户当前目标无关，例如订阅推广或非必要提示
用户需要参考对话框外的信息才能作出决定
任务可以在原位或旁路完成而不必打断

取舍

换来用户注意力的集中与错误预防，代价是打断当前任务；与目标无关的打断会被视为骚扰并削弱信任。

条件规则 · 编辑建议

当对话框打开必须把焦点移入对话框，并把 Tab 循环限制在其内部；关闭后把焦点送回触发元素。

当用户想放弃当前对话框必须提供显式的关闭或取消控件，并支持 Escape 关闭。

当对话框内已有未提交的输入建议点击遮罩不应无提示地丢弃输入；先确认或改为仅按钮关闭。

来源与支持范围

NN/g · Modal & Nonmodal Dialogs: When (& When Not) to Use Them ↗

模态对话框覆盖主内容并使系统进入需要用户先行交互的特殊模式；适用于防止关键错误与获取继续流程所需的信息，与用户目标无关的模态会被视为骚扰并削弱信任。

检索日期：2026-09-15

WAI-ARIA APG · Dialog (Modal) Pattern ↗

模态对话框之下的窗口是惰性的；打开时焦点移入对话框，Tab 在其内部循环，Escape 关闭，关闭后焦点返回触发元素；容器使用 dialog 角色并设置 aria-modal。

检索日期：2026-09-15

MDN · <dialog>: The Dialog element ↗

以 showModal() 打开的对话框使页面其余部分惰性并可用 Esc 关闭，而 show() 打开的非模态对话框不会；应提供显式的关闭按钮。

检索日期：2026-09-15

定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例；插画为编辑示意，应用到产品时仍须验证焦点管理与键盘可达性。

{
  "states": [
    "closed",
    "open",
    "confirmed",
    "dismissed"
  ],
  "a11y": [
    "容器使用 dialog 角色并标记为模态，有可访问的标题",
    "打开时焦点进入对话框，关闭时焦点回到触发元素",
    "Escape 与显式关闭控件都能关闭"
  ],
  "motion": "遮罩与出现动画可省略；减弱动态偏好下直接显示"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。

模态对话框

识别特征

概念边界

什么时候考虑它

什么时候慎用

取舍

条件规则 · 编辑建议

相关词条

来源与支持范围