模态框
Modal
别名:弹窗对话框模态弹窗确认弹窗弹出对话框遮罩弹窗网页中间弹出来的窗口
这是什么
覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
名词辨析
Modal 居中打断当前任务、要求处理；Drawer 从侧边滑出保留上下文；Popover 锚定触发元素、非打断；Sheet 只罩住当前窗口（macOS）。
交互实验室
试一试，再决定怎么用打开对话框，尝试确认、取消与关闭。
正在加载实验室…
使用时关注什么
- 01模态开启期间焦点应留在对话框内。
- 02关闭后回到触发入口，避免丢失操作位置。
✓ 适用场景
- 需要明确决策的破坏性操作（删除、支付）
- 任务必须完成后流程才能继续（向导、登录）
- 需要专注处理的临时内容（详情、快速编辑）
✕ 不适用场景
- 内容是辅助性的、可随时关闭（改用 popover 或 tooltip）
- 用户需要对照底层页面操作（改用 drawer）
- 移动端长内容滚动（改为全屏页面更稳）
常见形式
居中对话框
Centered
最经典形态，标题 + 正文 + 操作区
紧凑确认框
Confirm
小尺寸，只放一句文案和两个按钮
底部面板
Sheet
移动端常见，从底部升起承接长内容
实现要点
position: fixedinset: 0z-indextransformbackground-color遮罩用 fixed inset-0 + 半透明黑，面板用 flex 居中或 inset-0 m-auto。 打开时锁定 body 滚动，焦点移入面板，Esc 与点击遮罩均可关闭。 入场动画 scale 0.96→1 加淡入，200ms 左右；尊重 prefers-reduced-motion。
平台 API
<dialog>role="dialog"aria-modal="true"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA | role="dialog" |
| shadcn/ui | Dialog |
| MUI | Modal / Dialog |
| AntD | Modal |
横向对比
查看完整对比 →相关概念
从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件替代方案点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件替代方案在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件相似概念嵌在页面流内、带状态色底色的横条，用于必须被看见的消息：错误、警告、重要通知。 它占据文档流而不是覆盖内容，通常常驻直到问题被处理或用户手动关闭。
组件相似概念容易混淆
Drawer 从边缘滑出、空间更大，Modal 居中且更强调打断。
Popover 非模态、锚定触发器，Modal 遮罩整页并阻断操作。
Alert 是页内消息条，不打断；Modal 是必须处理的浮层。
Lightbox 专管图片/视频放大，Modal 承载通用任务。