展现形式 · 概念

Modal：中断当前流程的模态对话框

说明 Modal 模态对话框何时值得中断页面、如何管理焦点与关闭，以及长内容、嵌套弹窗和不可逆操作带来的风险。

Modal 是覆盖当前页面并暂时阻止与背景内容交互的对话框。它用来完成一个必须先处理的短任务或决策，因此天然具有中断性；视觉上浮在页面上方但不阻断背景的面板不一定是 Modal。

适合与不适合

适合确认高影响动作、完成短表单、选择必要选项或查看与当前任务紧密相关的少量信息。不适合长篇阅读、多步骤复杂流程、常规营销曝光，或本可在页面中直接完成的低风险操作。

优点与缺点

优点	缺点
集中注意力并保留原页面上下文	强制中断容易造成反感和迷失
适合短暂且边界明确的任务	焦点、滚动、关闭和背景 inert 实现复杂
可防止用户忽略关键确认	小屏容易退化成拥挤的“页面套页面”
关闭后可返回原工作位置	嵌套 Modal 会迅速增加状态复杂度

内容与交互要求

标题明确说明任务，正文只保留完成决策所需的信息。提供可见的关闭或取消方式；不可逆操作应清楚陈述影响，并考虑把初始焦点放在较安全的动作。不要自动弹出与当前任务无关的订阅或促销请求。

响应式与无障碍

打开时把焦点移入对话框，Tab 与 Shift+Tab 保持在其中循环，Escape 通常关闭；关闭后将焦点返回触发元素或逻辑上的下一位置。对话框需要可感知名称，背景内容在模态期间不可交互。原生 <dialog> 以 showModal() 打开时，浏览器会让背景不可交互并支持 Escape 关闭，可减少自建焦点管理的错误。长结构内容不应被压成一个冗长的无结构描述。