弹窗
Modal
初级通用弹窗（Modal）是覆盖在当前页面上的交互层，打开后让用户先处理其中的内容，背景页面暂时不能操作。它用于集中完成需要明确决定的步骤，例如删除项目前再确认一次。
你可能会说：「我想让用户点删除项目后，先看到一个必须处理的确认框，再决定删不删。」
动手看看删除项目的确认弹窗
打开弹窗
显示遮罩
弹窗盖在页面之上，用户必须先回答它的问题（取消还是确认），才能回到后面的页面。
遮罩把背景压暗，同时挡住背后的点击：用户不会误点到「项目 2」，注意力也集中到这个决定上。
要点弹窗为什么会打断当前页面？
- 1
背景暂时退出操作范围
弹窗打开后，用户通常会看到遮罩和置顶的内容区，页面其余部分暂时不能操作。因为它打断了原任务，所以内容最好只围绕眼前这一步，比如确认删除还是返回。
- 2
焦点跟着当前任务移动
如果用户用键盘操作，焦点要进入弹窗，并留在弹窗内的可操作元素之间。关闭后再回到触发它的位置，这样用户才不会突然失去自己在页面上的位置。
- 3
给用户明确的退出路径
弹窗里通常要有完成操作和取消操作的入口。比如删除项目时，写清「删除项目」和「取消」，比只写「确定」更容易判断结果；取消后，原页面内容保持不变。
容易混淆的地方
弹窗和轻提示的区别在于是否要求用户停下来处理：保存成功只需告知结果，用轻提示就够了。它和气泡卡片也不同：气泡卡片通常依附某个控件，供用户查看或做少量操作，不会锁住背景页面。判断关键是这一步是否需要用户先作决定，才能继续原任务。
什么时候用
适合用
- 在后台删除整个项目时，让用户先核对项目名称，再决定删除还是取消。
- 用户离开未保存的编辑页时，先让他选择继续编辑或放弃修改。
- 网站需要用户补齐一项必要信息，完成后才能继续当前提交操作。
不适合用
- 保存成功只是告知结果，不需要用户再作决定；用轻提示反馈即可。
- 点商品卡片只是想查看完整详情；进入详情页比用弹窗承载整页内容更合适。
- 用户需要一边看列表一边调整筛选条件；用侧栏或页面内筛选区，别锁住列表。
练一练选一个答案，看看解释
你在做项目管理后台：用户点击「删除项目」后，项目及其中的文件都将被移除。怎样安排这一步更合适？
让 AI 帮你做复制给 AI Agent 直接用
请在项目管理页为「删除项目」加入确认弹窗：打开后暂时不能操作背景页面，说明项目及其文件会被删除，提供「取消」和「删除项目」按钮。取消时不改动数据；关闭后把键盘焦点还给触发按钮。