←→ 切换·Esc 返回

弹窗Modal

提示与状态反馈
在当前页面上方集中处理一项任务

弹窗适合短表单、重要确认和内容预览。它会暂时限制用户操作背景页面，所以只在确实需要集中注意力时使用，并提供清楚的关闭方式和键盘焦点管理。

确认删除这个项目？
取消确认删除
上面是画出来的，点这个玩真的

什么时候用

  • 危险操作二次确认：删除、清空、解散
    确认删除这个项目？
    取消确认删除
  • 就地填个小表单：重命名、新建，一两项就够
    重命名项目官网改版 v2
    取消保存
  • 放大看内容：图片预览、详情速览
    封面预览
    关闭
  • 必须处理才能继续：实名认证、协议签署
    请先完成实名认证
    去认证

什么时候不用

  • 内容一长屏 → 换 抽屉 Drawer 或新页面
    很长的表单
  • 弹窗上再叠弹窗 → 用户会迷路
    确认删除？
    取消确认删除
    再确认一次？
    确定
  • 只是报个「成功」→ 用 轻提示 Toast
    保存成功
    好的
  • 拿弹窗做营销 → 被关掉率 100%
    🎉 限时 5 折！！
    残忍拒绝立即抢购
组成结构 · Anatomy
确认删除这个项目？取消确认删除
1遮罩Mask半透明盖住页面，点它通常可以关闭
2弹窗本体Dialog浮在遮罩之上，页面其余部分不可点
3标题Title说清要做什么决定，疑问句最直白
4内容Content后果说明或小表单，别塞太多
5操作区Footer主按钮说清结果，危险动作用红色
常见变体 · Variants
确认对话框Confirm
确认删除？
取消确认删除
危险操作前拦一下，必须表态才能继续
表单弹窗Form
重命名项目
官网改版 v2
取消保存
就地填一两个字段，如重命名、新建
内容预览Preview
封面预览
关闭
放大看图片或详情，看完就关掉
典型使用场景
删除确认
确认删除这个项目？
「官网改版 v2」及其 12 个文件将被永久删除，无法恢复。
重命名弹窗
重命名项目
图片预览
封面预览
强制实名认证
实名认证
发布内容前需完成实名认证，信息仅用于核验。