你可能会说
点击「删除」按钮后，弹一个确认框让用户二次确认，别直接删了。
弹窗（Modal）是覆盖在主内容之上的浮层对话框，强制用户处理完才能继续操作。
覆盖在页面之上的弹出窗口，出现时背景变暗，必须先处理它（确认/关闭）才能继续操作。用于重要确认、表单填写。
生活类比
像电梯里的楼层选择面板——你必须先选楼层（处理弹窗），电梯才会继续运行。
🎮 动手试试
👇 点击按钮打开不同类型的弹窗
关于「弹窗」，以下哪个描述最准确？
你可以这样告诉 AI
帮我做一个删除确认弹窗：点击删除按钮弹出，显示「确定要删除吗？此操作不可恢复」，有取消和确认两个按钮，背景加遮罩，ESC 可关闭。
Toast 是非阻塞的轻提示（自动消失），Modal 是阻塞的（必须操作才能继续）。
Popover 锚定在触发元素旁边，点击外部就关闭；Modal 居中显示，需要明确操作关闭。
需要用户确认的操作
删除、提交、支付等不可逆操作前弹窗确认，避免用户误触造成损失。
和 AI 协作时
想让 AI 做确认弹窗时，直接说「点击删除按钮弹一个 Modal，有取消和确认按钮，背景加遮罩」。
轻量提示场景
操作成功/失败的反馈用 Toast 就够了，用 Modal 打断用户操作反而体验差。
与 UI 无关的后端
写后端接口、数据库脚本、自动化测试时不需要考虑弹窗交互。
覆盖在页面之上的弹出窗口，出现时背景变暗，必须先处理它（确认/关闭）才能继续操作。用于重要确认、表单
像电梯里的楼层选择面板——你必须先选楼层（处理弹窗），电梯才会继续运行。
和 AI 沟通时提到「删除前弹个确认框」，做的就是 Modal。