模态对话框是伴随着半透明黑色遮罩出现的一种弹窗形式，用于关键信息录入或信息确认，需要用户进行操作，会中断用户当前的任务流程，所以请谨慎使用对话框以避免对用户过度干扰。

** 在用户界面中弹出来的对象几乎都可认为是弹窗，弹窗的交互形式主要分为模态与非模态两种：

  • 模态弹窗：用户必须给予弹窗反馈，除非点击关闭或者操作完成，否则弹窗不会消失，通常表现形式上会给页面遮罩，让用户集中注意力在弹窗上。常见的模态弹窗是对话框、抽屉；
  • 非模态弹窗：用户不必一定给予反馈，不影响、打断用户其他操作或正常使用，通常只会在屏幕上短暂停留，常见有通知提醒、全局提示、气泡卡片、文字提示等；

适用范围

何时使用：

  • 这个信息很重要，需要打断用户的流程来获取注意力，并需要用户给予操作反馈；
  • 用户在当前流程中有一个支线步骤，在不丢失当前页面上下文的同时，希望用户在完成该支线步骤后继续之前的流程；
  • 描述当前行为、操作可能导致的后果，提示用户，需要让用户决定；
  • 在用户开始操作之前，告知一些重要信息；
  • 通知用户有关其当前任务的紧急信息，通常用于报告系统错误或告知结果；

何时不使用：

  • 内容过多，伴随着复杂的交互，导致对话框过分密集，此时应该考虑更大的容器载体，比如 Drawer 抽屉、新开页面；
  • 不丢失当前页面的同时，并行进入一个新流程，并能够在两个流程之间随时切换，此时可采用新开页面的形式；
  • 简单频繁的确认操作，请使用 Popconfirm 气泡确认框，鼠标操作路径短更便于用户操作；
  • 对话框的二次确认，请使用 Popconfirm 气泡确认框；
  • 一段无需操作的简单信息想要告知用户，且又不阻断用户当前的流程，请使用 Notification 通知提示；

类型

类型 说明
基础型 基础弹窗结构，支持信息展示或录入
确认型 二次确认，询问、提示用户当前操作可能导致的后果，需要让用户决定
提示型 状态提示，包含「中立信息、成功、警示、错误」四种状态

基础型

image.png

内容区的可附加表格、文字、表单、警告提示、步骤条等内容：

警告提示：
image.png

步骤条：
image.png

穿梭框：
image.png

表格：
image.png

确认型

image.png

提示型

image.png

构成解析

结构

基础型：
image.png

  • 头部Header

    • 标题：标题应清晰传达对话框的内容，需要与触发入口文案保持一致；
    • 关闭按钮：用户主动点击按钮来关闭当前对话框；

  • 内容区Content

    • 可为文字，也可附加表格、文字、表单、警告提示、步骤条等内容；

  • 底部Footer

    • 操作项：位于右侧
      • 主要按钮始终置于最右侧，其余按钮根据重要性从右往左排列；
      • 如果只提供一个操作，则必须是主要按钮；
      • 一般为 2 个操作，即「确定」「取消」；
      • 分步对话框存在 3 个操作，上一步放在主要按钮左侧；
    • 扩展信息（可选）：位于左侧，可以承载独立操作项、行内提醒、辅助说明信息等，如果放置 Link，则必须为新开浏览器标签页面的形式。

  • 遮罩Mask

    • 遮罩层级最高，覆盖全页面，遮罩背后的元素不可交互，除非关闭对话框。

确认型：
image.png

  • 标题+图标 Title+Icon

    • 由「问号」图标与标题组成；

  • 内容区Content

    • 为内容文本，提示用户当前操作可能导致的后果；

  • 操作Action

    • 分别是「确定」与「取消」，确定作为主要按钮，置于右侧；

  • 遮罩Mask

    • 遮罩层级最高，覆盖全页面，遮罩背后的元素不可交互，除非关闭对话框。

提示型：
image.png

  • 标题+图标 Title+Icon

    • 由图标与标题组成，图标根据状态分「中立信息、成功、警示、错误」四种；

  • 内容区Content

    • 为对当前状态的简要描述文本；

  • 操作Action

    • 只有一个操作，即「我知道了」；

  • 遮罩Mask

    • 遮罩层级最高，覆盖全页面，遮罩背后的元素不可交互，除非关闭对话框。

尺寸

基础型：

  • 宽度： | 等级 | 尺寸 | 计算公式 | | —- | —- | —- | | S | 368 | 4 × 80 + 48 = 368 | | M(Default) | 528 | 4 × 120 + 48 = 528 | | L | 688 | 4 × 160 + 48 = 688 | | XL | 848 | 4 × 200 + 48 = 848 | | XXL | 1008 | 4 × 240 + 48 = 1008 |
  • 最小宽度为 480px；
  • 最大宽度 = calc(85vw)，内容过长时，内容区域出现水平滚动条；
  • 最大、最小宽度之间，自适应内容；
    • 高度：
  • 最大高度 = calc(85vh-100px)，内容过多时，内容区域出现垂直滚动条；
  • 最小高度为 200px；
  • 最大、最小高度之间，自适应内容；

确认型：

  • 宽度：固定为 480px；
  • 高度：自适应内容；

提示型：

  • 宽度：固定为 480px；
  • 高度：自适应内容；

间距

image.png
image.png

交互行为

触发

  • 通过按钮或其他元素触发，展开模态对话框，由用户主动发起；
  • 「提醒型」可能会在页面加载完成后立刻出现，也可能系统推送状态提示，由系统发起；

关闭

存在 3 种方法关闭当前的模态对话框：

  • 点击弹窗右上角的关闭图标按钮；
  • 使用键盘中的 ESC 键，录入时不建议使用，容易造成数据丢失；
  • 点击弹窗外的遮罩区域，录入时不建议使用，容易造成数据丢失；

内容溢出的处理

  • 头部与底部始终保持固定；
  • 对话框高度小于最大高度时，内容区的高度随内容自适应；
  • 对话框高度超过最大高度时，内容区激活内部滚动条；

尺寸过渡

在部分场景中，比如分步场景，前后两个步骤的对话框尺寸会需要内容的不同有所调整，这时可以使用动画来做过渡。

层级递进

暂时保留，因为目前暂时没用到二级对话框

  • 层级递进能够让用户在同一个模态对话框内完成不同的步骤，并方便的返回上一步骤；
  • 除一级步骤外，其余步骤中的对话框 Header 会激活返回图标按钮，用于返回上一步骤；

拖动

基础型对话框，鼠标左键按住头部时支持拖动；

布局

对话框的初始位置为水平垂直居中：
image.png

内容溢出时，内容区激活内部滚动条
image.png