弹窗Modal
你可能会说
点击按钮后弹出一个居中窗口，背景变暗，必须确认或关闭后才能继续。。
在当前页面上方居中弹出的阻断式对话框，用于聚焦单一核心操作。确认删除、填写短表单或预览内容可在弹窗内完成。它会限制背景操作，因此只用于确实需要集中注意力的任务，并要管理关闭和键盘焦点。
也常被叫作弹窗模态窗对话框模态框Dialog
什么时候用
- 危险操作二次确认：删除、清空、解散确认删除这个项目？取消确认删除
- 就地填写短表单：例如重命名或新建重命名项目官网改版 v2取消保存
- 放大看内容：图片预览、详情速览封面预览关闭
- 需要处理才能继续：实名认证、协议签署请先完成实名认证去认证
组成结构 · Anatomy
确认删除这个项目？取消确认删除
半透明盖住页面，点它通常可以关闭
浮在遮罩之上，页面其余部分不可点
清楚说明需要做出的决定
说明后果或承载简短表单，控制内容长度
主按钮说清结果，危险动作同时用文字和视觉提示风险
常见变体 · Variants
确认对话框Confirm
确认删除？
取消确认删除
危险操作需要用户明确确认后才能继续
表单弹窗Form
重命名项目
官网改版 v2
取消保存
就地完成重命名、新建等短表单
内容预览Preview
封面预览
关闭
放大看图片或详情，看完就关掉
典型使用场景
删除确认
确认删除这个项目？
「官网改版 v2」及其 12 个文件将被永久删除，无法恢复。
重命名弹窗
重命名项目
图片预览
封面预览
强制实名认证
实名认证
发布内容前需完成实名认证，信息仅用于核验。
延伸阅读 · 权威出处