ZUI 3对话框
在保留当前页面状态的情况下，直接使用触发按钮即可展现对话框，告知用户展示相关操作。
使用方法
使用 .modal 与 .modal-dialog 类获得对话框的外观展示，通常用在元素 <div> 上。使用 [data-toggle="modal"] 指定对话框触发按钮，在触发按钮上通过 data-target 属性指定要打开的对话框。
自定义位置
使用 data-position 自定义设置对话框位置。可设置 fit、center 或其具体像素值。
尺寸
除了默认大小，还提供了额外的 3 种预设尺寸。
信息提示
展示各种类型的信息提示，只提供一个按钮用于关闭。
控制遮罩层
通过 data-backdrop="false" 移除遮罩层，设置后可以操作模态框之外的交互。
CSS 类
对话框提供了如下 CSS 类：
| 类 | 类型 | 作用 |
|---|---|---|
modal | 实体类 | 元素作为对话框遮罩组件 |
modal-dialog | 实体类 | 元素作为对话框组件 |
size-sm | 工具类 | 对话框使用小号尺寸 |
size-lg | 工具类 | 对话框使用大号尺寸 |
size-xl | 工具类 | 对话框使用超大号尺寸 |
CSS 变量
对话框提供了如下 CSS 变量，可进行全局修改。
| CSS 变量名 | 作用 |
|---|---|
--modal-radius | 对话框默认圆角大小 |
--modal-bg | 对话框遮挡层颜色 |
--modal-sm | 对话框小号尺寸宽度 |
--modal-base | 对话框默认宽度 |
--modal-lg | 对话框大号尺寸宽度 |
--modal-xl | 对话框超大号尺寸宽度 |