弹窗
Modal / Dialog也常被叫作：对话框模态框弹框
「我想点一个东西之后，在当前页面上浮出一个小窗口。」
弹窗 Modal / Dialog
盖在当前页面上的临时窗口，用户必须先处理它或关掉它，才能继续原来的页面。
弹窗的价值是打断：它强制用户把注意力放到一件事上。正因为如此，它是界面里最该省着用的元素——每打断一次，用户就丢一点刚才的思路。
几个几乎一定会出的问题，可以当成验收清单：滚动（弹窗内容超过一屏，滚动条滚的却是后面的页面）、焦点（打开后键盘焦点还在背景页面上，Tab 会点进后面的按钮）、关闭（点遮罩能关、Esc 能关、有个明确的关闭按钮）、返回键（手机上按返回应该关弹窗而不是退出整个页面）。
内容上有个通用规则：弹窗里说人话。 好的确认弹窗不写「确定要执行此操作吗？」，而是写「删除后无法恢复，项目里的 12 条记录会一起消失。」把「会失去什么」说出来，用户才真的在知情。
另一个高频争议点：遮罩点击能不能关弹窗？没有标准答案，但有标准原则——如果弹窗里有未保存的输入，点遮罩别关；没有未保存内容时，点遮罩关闭是对用户的尊重。
长什么样 真实可交互，不是截图
删除这个项目？
删除后无法恢复，项目里的 12 条记录会一起消失。
注意文案：它没有问「确定吗」，而是告诉你具体会失去什么。这才是能让人放心做决定的弹窗。
拆开看，里面有这几块
-
1
遮罩 Overlay
盖住背景的那层半透明底。它的存在告诉用户「后面的页面暂时不能动」。
-
2
标题 Title
一句话说清这个弹窗要做什么。「提示」「确认」不是标题。
-
3
内容 Content
决定和信息的正文。删除类必须写清会失去什么。
-
4
动作 Actions
通常两个：一个继续、一个后退。危险动作的按钮要危险色。
-
5
关闭路径 Close paths
X 按钮、Esc、遮罩、手机返回键。少一条都会卡住一部分用户。
容易搞混？这样区分
弹窗从中间浮出、挡住后面；抽屉从侧边滑出、通常不挡全屏。判断方法：内容短、需要用户立刻决定 → 弹窗；内容长、像一个小页面（设置、详情）→ 抽屉。
气泡卡片附着在触发元素旁边，点外部就消失，用于补充信息；弹窗是页面中心的正事。判断方法：不处理会卡住用户吗？会才是弹窗。
什么时候用得上
写清会失去什么。这是弹窗最正当的用途。
弹窗里填到一半时，点遮罩不要关，避免内容丢失。
别用弹窗庆祝，用轻提示。成功不需要用户再点一次「好的」。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【任务】给 [某个操作] 加一个确认弹窗 【内容要求】 - 标题：说清要做什么，不用「提示」「确认」 - 正文：写清执行后会失去什么 / 发生什么（具体数字或后果，不要泛泛的「此操作不可逆」） - 两个按钮：继续（危险动作用危险色）+ 后退 【交互要求】 - 打开后键盘焦点要进入弹窗 - Esc 和遮罩点击能关闭；手机返回键关弹窗而不是退页面 - 弹窗内容超出屏幕时，滚动条滚弹窗内部，不滚后面的页面 【边界】不要顺便改页面其他元素；不要给成功操作也加弹窗 【交付】我怎么打开这个弹窗验证，以及上面三条交互要求你逐条验过没有。
交互要求那三条（焦点、Esc、滚动）是最常被 AI 漏掉的，写进需求里，验收时就有的放矢。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 打开弹窗后按 Tab：焦点应该进入弹窗内，而不是跑到背后的页面按钮上。
- 按 Esc 能关；点遮罩能关（如果有未保存输入，点遮罩应该不关——确认这种设计是刻意的）。
- 弹窗内容超过一屏时，滚动滚的是弹窗内部，后面页面纹丝不动。
- 手机宽度下按返回键：关的是弹窗，不是退出页面。
- 遮罩打开时，背后的内容用键盘 Tab 应该够不到。
它常这么糊弄你
- 「弹窗已完成」——但只有视觉，焦点、Esc、滚动一条都没做。这是最典型的「看起来像弹窗」。
- 背后页面还能滚动（身体滚动没锁）。你用滚轮滚了半天，动的不是弹窗。
- 「确定要执行此操作吗？」——这种文案把决定的重量全部推给用户，却没说清后果。
- 用弹窗做成功提示，让用户完成一件事之后还要再点一次关闭。
弹窗能验到「主路径」层：上面每条都是你亲手能试的。
考考你 选一个你觉得对的
AI 做好了弹窗，你验收时最容易被忽略、也最该先试的是？
焦点管理是「看起来像弹窗」和「真是弹窗」的分水岭，也是读屏用户能否使用的前提。B、C、D 都是视觉层面的检查——它们重要，但在焦点、滚动、Esc 这些功能面前，优先级在后。