对话框

对话框用于显示额外内容，并引起用户对特定操作或场景的注意。对话框会阻止用户与父页面进行交互，直到对话框被关闭或执行了其中指定的操作。

§入口

对话框的入口可以是点击特定的触发器（例如，界面中的一个按钮），或者界面中的某些操作或条件（例如，尝试在未保存数据的情况下离开页面，或在另一个标签页中更改账户）。

§尺寸

对话框的尺寸由其内容决定。

尺寸 S - 480 px: 用于小型通知/确认和表单。

尺寸 M – 720 px: 用于小型和中型表单。

尺寸 L – 900 px: 用于大量数据和模态窗口内的流程。

自定义尺寸: 当以上三种选项（S、M 或 L）都不适用时使用。

§内容区域

对话框窗口可以包含任何类型的内容。布局的选择取决于用户的需求。

如果对话框包含表单，建议采用以下两种布局之一：

§按钮

在大多数情况下，都需要操作按钮。如果用户未完成对话框中指定的操作，按钮将处于禁用状态。 左侧是自定义控件区域，您可以在此处放置次要按钮和链接。例如，参考链接。

在某些情况下，可以使用危险按钮代替操作按钮（例如，在删除实体的对话框中）。

如果不存在目标操作，且对话框仅用于信息提示，则不需要操作按钮。在这种情况下，可以使用普通样式的关闭按钮。

次要按钮始终用作取消按钮。也可用于执行其他操作（例如，不更改继续）。

可能根本没有按钮。通常，必须在内容区域内进行选择，否则将无法访问父界面。

§对话框内导航

如果对话框包含多个步骤，请使用后退按钮返回到上一步。

如果对话框是嵌套的，但步骤不是线性的，您可以在窗口的内容区域使用面包屑导航。

§对话框在页面上的定位

对话框在屏幕上垂直和水平居中对齐。

在缩放视口时，其定位保持不变，对话框窗口的大小可以减小，只要不影响内容。

与屏幕顶部和左侧边缘的最小允许间距为 20px。

当窗口无法在视口内显示时，顶部和左侧的间距保持不变，而对话框窗口的右侧和底部边缘会超出屏幕边缘。但是，不建议这样做。因此，对话框的设计应使其能够适应视口，并且所有侧面的间距距离屏幕边缘至少为 20px。

§关闭窗口

除了目标操作外，还可以通过以下方式关闭模态窗口：

如果窗口不是模态的，可以通过以下任一方法关闭：

• 点击模态窗口外部
• 按 Esc 键

“取消”和“X”按钮是熟悉的元素，因为它们在对话框中被广泛使用。点击模态窗口外部可以方便用户关闭它，因为他们不必将鼠标光标对准特定元素。按 Esc 键允许在没有鼠标的情况下关闭窗口。

由于只期望与对话框进行交互，因此父页面的内容不应滚动。

§防止用户数据丢失

由于模态窗口很容易关闭，因此总有意外关闭的可能。如果用户仅在模态窗口中选择了复选框，则比用户花费大量时间编写代码或重新输入车辆的 12 位 VIN 码更容易恢复丢失的数据。因此，最好避免这种情况。但是，我们不应阻止用户以常规方式关闭模态窗口。

为避免数据丢失的风险，我们建议使用一个额外的确认窗口来删除数据。在这种情况下，用户必须确认该操作。

关闭模态窗口时，请运用常识来判断是否需要另一个确认窗口。重要的是在安全性和避免过多烦扰用户的提问之间取得平衡。确认的目的是防止用户输入丢失，同时仍允许他们执行脚本。