模态框Modal
遮罩盖住了背景，Tab 却跑到背后的按钮，算模态框吗？
模态框是暂时阻止用户操作背景内容的对话界面，要求先处理或关闭当前任务。模态取决于实际交互约束与焦点管理，不取决于面板是否居中，也不是加一层半透明背景就算完成。
临时把一件事放到面前处理，但要留出口。关掉后，人应该回到刚才的位置。
柜台请你先核对一项重要选择，办完后回到原来的办理步骤。
类比到这里为止：网页的“不能操作背景”也要对键盘与辅助技术成立，不能只让鼠标看起来被遮住。
清除当前报价草稿前，框内说明会丢失哪些本地内容，优先聚焦取消按钮；取消或 Escape 不更改草稿，确认后再报告实际结果。
一次完整的打开与关闭
- 打开
- 使用可读取标题，焦点进入框内适合的位置。
- 操作
- Tab 与反向 Tab 留在框内，背景不可操作。
- 取消
- 有可见取消入口；本例 Escape 同样取消，不执行危险动作。
- 关闭
- 焦点回触发按钮；按钮已不存在时回到合理后续位置。
确认的是具体后果
“确定吗”缺少对象与影响。应写清清除哪份草稿，是否可以恢复，并把取消与实际动作分开命名。
本例用原生对话框清除虚构课堂草稿，不删除磁盘文件。关闭对话框只退出当前交互，不代表操作已经成功。
继续看项目应用与交付检查
模态框 在项目中负责什么
- 什么时候用
- 短而关键的输入或决定需要暂时独占注意力时。
- 它解决什么
- 明确当前任务的边界，减少用户在背景与临时任务之间误操作。
- 它不负责什么
- 不要为普通说明反复打断人。aria-modal 只声明语义，不会替你禁止背景操作；复杂长任务通常更适合完整页面。
- 放进真实项目
- 用户删除报价草稿前弹出确认框，说明影响并给出取消入口。
模态框只在必须暂停当前任务、先做决定时使用
批量删除线索、确认对外发送报价或完成关键设置，需要用户集中确认；查看普通详情没有必要锁住整页。
- 01
确认当前任务是否真的必须被中断。
- 02
标题和主按钮直接写明后果。
- 03
管理焦点、滚动锁定和关闭后的恢复。
焦点进框、背景不可操作、关闭回原处。
容易混淆的地方
Dialog 可以模态或非模态；原生 showModal() 与 show() 行为不同。抽屉描述边缘布局，不自动决定是否模态。
确认清除草稿的框打开后，背景变暗，但按 Tab 会进入背后的导航。哪里还没有做对？
你可以这样告诉 AI Agent
“
我在处理这件事：用户删除报价草稿前弹出确认框，说明影响并给出取消入口。请以“模态框”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践