弹窗Modal

你可能会说

点击按钮后弹出一个居中窗口，背景变暗，必须确认或关闭后才能继续。。

在当前页面上方居中弹出的阻断式对话框，用于聚焦单一核心操作。确认删除、填写短表单或预览内容可在弹窗内完成。它会限制背景操作，因此只用于确实需要集中注意力的任务，并要管理关闭和键盘焦点。

也常被叫作弹窗模态窗对话框模态框Dialog

确认删除这个项目？

取消确认删除

上方为静态示意，点击按钮可查看交互效果

你可以这样告诉 AI Agent

订单页的地址编辑请放进 Modal，打开后焦点进入标题或首个字段，提供保存和关闭；关闭后焦点回到触发按钮。保存一次和按 Esc 关闭一次，确认订单页背景未被误操作且焦点返回正确位置。

组成结构 · Anatomy

确认删除这个项目？取消确认删除

半透明盖住页面，点它通常可以关闭

浮在遮罩之上，页面其余部分不可点

清楚说明需要做出的决定

说明后果或承载简短表单，控制内容长度

主按钮说清结果，危险动作同时用文字和视觉提示风险

常见变体 · Variants

确认对话框Confirm

确认删除？

取消确认删除

危险操作需要用户明确确认后才能继续

表单弹窗Form

重命名项目

取消保存

就地完成重命名、新建等短表单

内容预览Preview

封面预览

关闭

放大看图片或详情，看完就关掉

典型使用场景

删除确认

重命名弹窗

图片预览

强制实名认证