Skip to main content

弹窗详情页

弹窗的信息容量相对较少,悬浮在基础内容上的内容层,通常是居中固定的显示区域,和触发的元素没有位置联系。


弹窗结构

弹窗详情的结构分为三个部分:1.标题栏;2.内容;3.操作按钮。

标题栏

通过标题表达弹窗的主要内容,包括标题与关闭按钮。

点击关闭按钮将关闭弹窗并不提交任何数据。

标题栏文案

  • 间断、清晰地陈述出主要信息。
  • 避免使用模凌两可的语句。

内容

展示完成弹窗任务所需的信息文本与组件。

当内容超出弹窗高度范围时,正文内容应垂直滚动,而对话框标题与操作按钮保持固定不动,并且不应使用水平滚动。

操作按钮

  • 一个按钮:当只有一个操作的时候使用主按钮。
  • 两个按钮:次要按钮位于左侧,主要按钮位于右侧。
  • 三个按钮:最右边的作为主要按钮,其余两个辅助操作的使用次要按钮。当有危险操作的按钮时,放在中间,避免操作习惯意外执行而导致重大操作失误。

何时使用

  • 需要立即完成的用户任务、决策或确认的关键信息;
  • 弹窗会一直悬浮在基础内容层上,直到确认、关闭或采取必要的操作。