一天一个 vibe coding 术语课，今天讲弹窗。
弹窗就是临时叠在当前页面上，单独展示一段信息，或者处理一个小任务的小窗口。
这一集先把名字认准，再看里面有哪些部分、用来处理哪些任务，以及什么时候会锁住后面的页面。
最后再补一层：这些能力在前端里通常怎么组合。
一、弹窗在设计里叫对话框
你点下「删除账号」，页面中间浮出一个小窗口，原来的页面还在后面，但眼前多了一段说明和两个按钮。
这个小窗口，平常都叫弹窗。设计和开发里更正式的名字叫对话框，英文是 dialog。
它没有把你带到另一张页面，而是在当前页面上单独划出一小块地方，让你处理眼前这件事。
页面上本来还有很多内容。要是删除后果只写在角落里，人很容易没看见就继续点下去。把这次决定单独放进对话框里，标题、后果和按钮就能摆在一起。
有的对话框会要求你先处理它，有的打开以后还能继续使用原来的页面。两者的分界，不在长相，而在它会不会把后面的页面锁住。
二、一个对话框里有什么
还是看删除账号的对话框。
最上面通常有一句「确认删除账号吗」。这叫标题，英文 title。标题要直接说清现在发生了什么，不能只写「提示」或者「请注意」。
标题下面会说明删除以后哪些东西会消失、还能不能找回。这块叫正文区，英文 body。
正文区只放理解这次决定必须知道的东西。要是塞进一整页协议、十几项说明，用户不是看得更仔细，而是直接跳到最下面找按钮。
最下面是操作区，里面放着「取消」和「删除账号」这类按钮。这些完成或取消当前任务的操作，英文常叫 actions。
操作按钮不能只写「是」「否」，也不要什么场景都写「确定」。按钮最好直接说点下去会发生什么。看到「删除账号」，人不用回头猜这个「确定」到底确定了什么。
对话框外面有时还会压着一层半透明的灰黑色，把原来的页面盖暗。这一层叫遮罩，英文 backdrop。
遮罩不是为了装饰。它是在告诉你，后面的页面现在退到第二层了，眼前这个对话框才是当前要处理的东西。
对话框还得给用户一条清楚的退出路。根据里面的任务不同，这条路可能是右上角的叉，也可能是「取消」按钮。
三、modal 说的是后面的页面还能不能操作
对话框出现以后，你再去点后面的页面，页面没有反应。键盘也只能在对话框里面移动，关掉以后才能回去。
这种把外面锁住的方式，中文叫模态。用英文形容这个对话框时，叫 modal。
dialog 说的是眼前这个小窗口是什么。modal 说的是它打开以后，后面的页面还能不能操作。
后面的页面被锁住，这个 dialog 就叫 modal dialog，中文叫模态对话框。
前面那层遮罩，通常也会跟着模态对话框一起出现。后面的页面不只是看起来退到第二层，实际上也已经不能点了。
确认对话框通常是模态的。它要求你先处理眼前这件事，再回到原来的流程。
也有对话框打开后，主页面仍然可以操作。这叫非模态对话框，英文 non-modal dialog。
比如一些电脑软件会单独打开一个查找窗口。你可以让它一直摆在旁边，同时继续编辑原来的内容。它没有把主窗口锁住，就不是模态的。
判断一个对话框是不是 modal，不是看它有没有圆角、有没有阴影，也不是看它是不是摆在正中间。只看一件事：它出现以后，后面的内容还能不能用。
四、对话框通常拿来做哪几件事
有些对话框用来完成一个很短、又必须留在当前场景里的小任务。
比如新建文件夹时填一个名字，或者给文件改个名称。内容不多，处理完还要回到原来的位置，用对话框承接会比跳走再跳回来更顺。
另一种常见用途，是让用户在真正执行之前再确认一次。
清空回收站、放弃没保存的内容、支付一笔订单，做完以后很难撤回，或者代价比较大。最后这一下再问一次，叫确认对话框，英文 confirmation dialog。
确认对话框要把后果说具体。
「是否确认此操作」没有告诉用户任何新东西。「删除后无法恢复，是否删除这份文件」才让人知道自己正在承担什么后果。
如果眼前的消息重要到必须立刻打断当前流程，而且一定要让用户回应，这种对话框还有一个专门的名字。
它叫警告对话框，英文 alert dialog。
警告对话框一定是模态的。当前操作出了问题，必须让用户选择重试还是取消，会用到它。一个操作会造成难以挽回的损失，需要用户明确确认，也会用到它。
确认对话框和警告对话框可以落在同一个对话框上。前一个名字说的是它拿来确认，后一个名字说的是这件事重要到必须立刻回应。删除账号的对话框，既是确认对话框，也可能同时是警告对话框。
但对话框不是一张缩小版的页面。
如果里面要填十几个字段，要来回查看资料，还要分成好几步，用户会被困在一个又窄又长的小窗口里。这样的任务更适合放到完整页面上。
五、前端里常见的一层层封装
同一个项目里，删除账号、新建文件夹、登录失效等场景，都可能用到模态对话框。
要是每个页面都从头写一遍，圆角可能一会儿大一会儿小，标题和按钮的位置也会到处变化。就连遮罩多深、怎么关闭，都可能各写各的。
前端开发里有一个常见做法，叫封装。封装就是把反复出现的样子和行为先写成一份，后面需要的时候都来复用它。
很多项目会先做一个底层的 Modal。它统一负责打开和关闭、遮罩、锁住后面的页面、管住焦点这些模态能力。
再在 Modal 上加上标题、正文区和操作区，封装成平常使用的 Dialog。
碰到阻断型报错，当前操作已经没法继续，必须让用户看见错在哪里，还可以在同一套底层能力上继续封装成 AlertDialog。里面写清错误原因，再给一个确认关闭或者重新尝试的按钮。
这里说的是前端项目里常见的一种组件分层，不是所有项目都必须按这三个名字来排。有的项目命名不同，但底层能力只写一份、上层按用途组合的思路是一样的。
这样做，统一的不只是圆角、阴影、间距和按钮样式。遮罩、动画、焦点和关闭方式也不会每个页面各来一套。
六、打开和关上都要接得住
用鼠标的人看见对话框，会自然把注意力移到中间。只用键盘，或者靠软件把屏幕内容读出来的人，也得知道对话框已经出现了。
所以模态对话框一打开，当前操作位置也要跟着进入对话框。按 Tab 键时，只能在对话框里的输入框、按钮和其他能操作的东西之间移动，不能悄悄跑到被遮住的页面后面。
这件事叫焦点管理。焦点就是键盘当前正在操作的位置。
对话框关掉以后，焦点通常要回到刚才打开它的那个按钮上。用户才知道自己回到了哪里，不用从页面开头重新找一遍。
关闭方式也要跟事情的轻重匹配。
不少普通对话框可以点取消、点右上角的叉，电脑上还可以按 Esc 键退出。
如果是删除账号、放弃未保存内容这类后果很重的决定，不要默认把焦点直接放在危险按钮上。先放在更安全的选择上，通常更稳妥。
七、最常见的一条用错
用户刚保存完，弹一次「保存成功」；刚切换设置，弹一次「设置成功」；打开首页，又弹一次「欢迎回来」。
什么消息都用模态对话框打断一下，每一条消息都不难懂，却都要求用户停下手里的事，再多点一次关闭。
模态对话框本来是用来抢注意力的。抢得太勤，用户就容易养成一个动作：不看内容，直接找叉。
等真正危险的确认弹出来，他也可能条件反射地直接关掉，或者直接点确定。重要消息反而淹没在前面那些不重要的打断里。
判断要不要用模态对话框，只问一件事：这件事如果现在不让用户停下来处理，他还能不能安全地继续？
能继续，就别打断。必须先处理，才让模态对话框出现。
以后 AI 回你的话里出现 dialog、modal、alert dialog 这些词，别把它们混成同一个名字，让它逐个用大白话说清。
这个对话框要处理什么任务？它是不是 modal？这件事真的必须让用户立刻回应吗？三件事分开，名字就不会乱。
