定义

弹窗是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
image.png

组件样式与交互说明

弹窗分为阻碍式和非阻碍式两种。

  1. 阻碍式：有遮罩，遮罩下的内容不可操作，无法通过点击遮罩区域关闭弹窗；适用于阻断式强提示、需要聚焦进行少量信息输入的场景。
  2. 非阻碍式：无遮罩，适用于更加轻量、弱阻断的提示、信息输入场景。

[尺寸] 弹窗的最小高度=160px，最大高度=600px；宽度有三个尺寸：S=400px；M=700px；L=1000px
[阴影] 弹窗在于临时层，阻碍式\非阻碍式均使用：阴影3_扩散

[规则] 弹窗本身不可叠加，抽屉/双层抽屉上最多可再叠加一个弹窗。

弹窗S示意

image.png

弹窗M示意

image.png

弹窗L示意

image.png

构成元素

弹窗由头部、底部容器&内容、行动点(组)构成。

1. 头部（可选）

带标题弹窗：头部高度=52px，标题字号=18px
无标题弹窗：二次确认、告警、强提示反馈 等弹窗，无需使用标题

2. 底部容器&内容

底部容器相当于一个大卡片，卡片内边距 Padding(l, r, t, b) = 20px
内容的具体规则跟随不同内容类型而定（如表单、表格、详情 等）

3. 行动点(组)

行动点大小：M号
当内容超过最大高度，内容区出现滚动条，行动点置底：行动点底板高度=60px，行动点距上=12px，距下=20px

构成元素规则示意

image.png

典型案例

信息浏览弹窗

image.png

提示对话框_常规

统一使用宽度=400px
image.png

提示对话框_强调

统一使用宽度=400px
image.png

强调型结果反馈

image.png

指向性弹窗

用于指向性明确、较为简单的跟随操作，常用于触发后的补充说明/操作
多应用于：新手引导、确认操作、进一步说明 等
image.png

相关规范链接

1.表单-单列

点击此链接查看

2.表格

点击此链接查看

3.表单详情

点击此链接查看
**

设计稿链接 (Sketch)

点击此链接查看