2026-10-04 【泛知碎藏】别再管所有弹窗都叫「弹窗」了｜前端：弹窗与提示 12 术语网页演示
转载整理：本文依据原视频：别再管所有弹窗都叫「弹窗」了整理，补充本站绘制的示意图、使用注意和网页演示。原内容版权归原作者。
“弹窗”在日常交流里很方便，但做界面时，最好说清楚：它在哪里出现、是否阻止背景操作、用户需要做什么、信息保留多久。
这里的 12 个词并不都是弹出的窗口：有些是页面内的提示，有些是加载状态或结果页。不同组件库的命名也会略有差异，下文帮助辨认常见用法，不把名称当成绝对规则。
先看用途，再选组件
| 你的目的 | 优先考虑 | 判断重点 |
|---|---|---|
| 说明当前页面状态 | Alert | 信息与内容紧挨着，便于回看 |
| 告知一条短结果 | Toast | 信息短、无须立即处理 |
| 告知较完整消息 | Notification | 可能有正文、动作或消息记录 |
| 暂时集中处理一件事 | Modal | 背景不可交互，有清楚的退出路径 |
| 保留上下文，展开详情 | Drawer | 从侧边展开，内容空间较大 |
| 简短地确认当前操作 | Popconfirm | 贴近触发点，后果明确 |
| 显示可交互的补充信息 | Popover | 可以容纳菜单、表单等内容 |
| 解释图标或短术语 | Tooltip | 简短说明，不放交互控件 |
| 表示任务推进 | Progress | 确定进度必须来自真实数据 |
| 占住正在加载的内容位置 | Skeleton | 形状接近最终布局 |
| 告知最终结果和下一步 | Result | 是结果区域，不一定弹出 |
| 表示进度未知的等待 | Spinner | 不伪造百分比，超时可重试 |
01 · Alert｜警告提示
就地说明当前状态。 放在相关内容旁，持续提醒当前页面的状态。例如表单上方的填写错误、试用环境的数据重置提醒。它不必固定在顶部，也可以由用户关闭。
**使用注意：**需要用户回看或处理的信息，优先使用就地提示；严重错误应告诉用户如何修复。
02 · Toast｜轻提示
轻反馈，不打断。 “已保存”“复制成功”等短反馈，通常短暂出现，不拦截操作。位置和停留时间由产品决定，并非只能放在右下角或固定两秒。
**使用注意：**需要操作、内容较长或容易错过的消息，不要仅靠自动消失的 Toast。
03 · Notification｜通知
有内容，也可以有动作。 承载较完整的消息，如审核结果、评论回复、后台任务完成。可以是一张浮出的通知卡片，也可以进入消息中心；并不等同于铃铛下拉菜单。
**使用注意：**是否持久、是否进入消息中心，需要产品明确设计。通知并不天然永久保存。
04 · Modal｜模态对话框
暂时聚焦一件事。 打开后背景暂不可交互，用户在对话框内确认、取消或填写内容。Modal 说的是交互模式；Dialog 是对话框，既可以模态，也可以非模态。
**使用注意：**提供明确的取消或关闭路径；不要把“模态”理解成必须完成任务才准离开。
05 · Drawer｜抽屉
侧边展开，保留上下文。 从页面侧边展开的详情或编辑面板，适合内容较多、又希望保留列表上下文的场景。通常从左右展开，也可以从底部展开。
**使用注意：**抽屉可以是模态的，也可以是非模态的。背景看得见，不代表一定能操作。
06 · Popconfirm｜气泡确认
在触发按钮旁确认。 靠近触发按钮的小型确认面板，适合操作意图清楚、说明很短的二次确认，如移除一个可恢复的收藏。
**使用注意：**不可逆或后果严重的操作，应使用更明确的说明与确认流程，不能只问“确定吗”。
07 · Popover｜气泡卡片
补充内容，可以交互。 围绕触发点显示更多内容，如用户资料、选项菜单或小型操作表单。可由点击、焦点或其他明确操作打开。
**使用注意：**与 Tooltip 的主要区别是可以容纳较完整、可交互的内容；注意焦点和关闭方式。
08 · Tooltip｜文字提示
解释短，不承担操作。 鼠标悬停或键盘聚焦时提供简短说明，例如图标按钮的含义。文字可以换行，但不应塞入需要点击的按钮或表单。
**使用注意：**重要说明不能只藏在悬停提示里。触屏、键盘用户也应该能理解并使用功能。
09 · Progress｜进度条
有依据才报百分比。 能测量的工作量适合展示确定进度，例如已上传字节 / 总字节；无法测量时可以使用不确定进度，不必捏造百分比。
**使用注意：**进度必须与实际任务对应。失败、取消、重试和完成状态都需要反馈。
10 · Skeleton｜骨架屏
先占位置，再填内容。 用与最终布局相近的占位块表示内容尚在加载，如卡片封面和标题占位。它能减少布局跳动，但不是任务完成比例。
**使用注意：**加载完成及时替换；加载失败提供重试，而不是让占位块一直闪。
11 · Result｜结果页
任务结束，交代下一步。 展示一段流程的最终结果，如提交成功、无权限或页面不存在。一般包含状态、简短解释和下一步入口。
**使用注意：**Result 通常是页面或内容区域，并非弹出的窗口。不要只给一个“成功”而没有后续行动。
12 · Spinner｜加载指示
正在处理，进度未知。 用旋转等动效表示系统正在处理，但无法给出准确进度。适合短时间、范围明确的等待，如按钮提交中。
**使用注意：**等待过久时补充原因、取消或重试。尊重减弱动画偏好，不让动效代替状态说明。
最容易混淆的三个区别
**Modal 与 Drawer：**一个说交互是否模态，一个说面板如何展开。抽屉完全可以同时是模态的，不能只按外观判断是否允许操作背景。
**Popover 与 Tooltip：**前者可以承载操作和较丰富内容；后者主要解释。需要让用户在里面点按钮时，不要硬塞进 Tooltip。
**Toast 与 Notification：**不要只看位置。信息长度、是否需要动作、能否回看和停留策略，才是设计时需要明确的差别。
一个实用的检查顺序
- 信息是否必须一直看见？是的话，先考虑就地展示。
- 是否需要暂时阻止其他操作？需要时再考虑模态交互。
- 是否有必须点击的动作？有的话，避免纯文字 Tooltip 和过快消失的 Toast。
- 等待是否能量化？能量化就展示真实进度，否则说明正在处理。
- 键盘和触屏能否使用？焦点、关闭、错误和重试是否清楚？
本文示意图只用来说明结构，颜色、位置和动效并非组件的定义。示例中的操作均为本地演示，不会提交真实数据。
参考与来源：原视频、MDN：Dialog、MDN：Popover API、WAI：Tooltip 模式、MDN：Progress。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
转载整理 · 原文来源
https://www.bilibili.com/video/BV14Utf6QEnB/?spm_id_from=333.1365.top_right_bar_window_history.content.click评论区
一起讨论，一起进步
交流想法，也欢迎提出建议。
评论加载中…
