弹窗（Modal/Dialog）用于聚焦式交互——确认、录入、提示。设计得当是效率工具，设计滥用则是最招人烦的打扰。本讲讲清弹窗的类型、何时该用、关键规范与陷阱，避免"弹窗三连"赶走用户。
刚关一个又弹一个，"请关注我们""再抽一次""订阅推送"，用户直接卸载/关站。
点遮罩关不掉、没有明确关闭按钮、按 Esc 没反应，用户被困在弹窗里。
用户正填表/阅读，突然弹窗打断，还拿不到焦点，键盘操作完全错乱。
删除、覆盖等不可逆操作，用确认弹窗 + 危险色按钮，给用户"最后一次反悔"。
新增/编辑小表单，聚焦当前任务，避免跳页；内容多时用全屏抽屉更合适。
操作成功/失败的轻提示，用 Toast 即可，别用需要点击关闭的模态框。
轻量查看详情，上下文不丢失；内容长则优先详情页或抽屉。
优惠、订阅、引导类弹窗，务必克制、可关闭、有频控，否则反噬品牌。
新手引导、功能提示，用 Tour/气泡而非模态框，降低打断感。
不是所有提示都要弹窗。轻的用 Toast，重的才用 Modal，对照下表少踩坑。
| 反馈场景 | 推荐形式 | 不推荐 | 原因 |
|---|---|---|---|
| 操作成功/失败 | Toast 轻提示 | 确认弹窗 | 轻反馈无需打断 |
| 危险操作确认 | 确认弹窗 | Toast | 必须让用户二次确认 |
| 新增/编辑单条数据 | 弹窗或抽屉 | 跳转新页面 | 保持上下文更高效 |
| 长表单编辑 | 抽屉 / 全屏页 | 小弹窗 | 空间不足、易滚动受限 |
| 新手引导 | Tour 气泡 | 模态框 | 模态框打断感过强 |
| 营销弹窗 | 克制 + 频控 | 进来就弹 | 滥用直接流失用户 |
弹窗打断任务流，能用页面内联/抽屉/Toast 解决的就不弹窗。每弹一次都在消耗用户耐心。
右上角关闭按钮 + Esc 关闭 + 点击遮罩关闭（可配置），三种方式至少要有两种。
打开时焦点移入弹窗并锁定 Tab 循环，关闭后焦点回到触发元素，键盘用户才能顺畅操作。
半透明遮罩隔离背景，层级保证单一弹窗；避免弹窗套弹窗（深度最多 1-2 层）。
标题 + 正文 + 按钮都要清晰：确认按钮说明动作结果（如"删除文件"而非"确定"），危险操作用红色按钮。
移动端弹窗宽度贴合屏幕、内容可滚动、按钮不挤；超长内容优先换抽屉或全屏页。
删除、清空、转账、发布，弹窗给用户最后的确认机会，防手滑事故。
在列表内编辑单条数据，弹窗/抽屉保持上下文，比跳页体验更好。
站内登录弹窗不打断浏览，购物车结算流程中也常见，提升转化。
版本更新、重要政策等强提示，低频、必须知悉时才用模态框。
