Dialog
简介
“弹框” 亦称 “对话框”，是最常见的 UI 交互元素之一。
CMUI 只支持模态弹框。模态弹框是指弹框将下层的页面内容遮盖，避免用户与弹框之外的内容进行交互。
注意
- 此组件依赖 CMUI 的 Mask 组件。
结构
在使用弹框的 JS API 之前，需要在页面中写好（或由 JS 动态生成）相应的弹框元素。弹框元素的结构大致如下：
div.cm-dialog //弹框的容器
a.cm-dialog-close-btn @href="#" //关闭按钮（注 1）
div.cm-dialog-img //头图（注 2）（注 4）
header.cm-dialog-header //弹框标题栏（注 2）
h2.cm-dialog-header-title //标题文字
main.cm-dialog-content //弹框主体（注 3）
...
footer.cm-dialog-footer //弹框底栏（注 3）
...
注 1：“关闭按钮” 会由 JS API 自动生成，无需手工编写。
注 2：有此标注的多个元素至少应该存在一个。
注 3：有此标注的各个元素均为可选。
注 4：头图可由
<img> 标签来实现，也可由背景图片来实现。无论使用哪种方法，都需要指定图片的高度。
样式
弹框默认具有圆角样式，其内容会被切圆角。
弹框并不是静态的布局元素，且默认不显示。但由于弹框有多种样式组合，为便于演示，下面把弹框以静态元素的形式展示出来。
注意：以下示例并没有列出所有可能的样式组合，你可以根据 “结构” 段落所述的约定自行搭配出更多的弹框样式。
仅有头图
仅有标题
头图 + 标题
头图 + 内容
标题 + 内容
标题 + 底栏
头图 + 底栏
标题 + 内容 + 底栏
头图 + 自动关闭提示栏
当 JS API 设置了弹框的自动关闭功能时，“自动关闭提示栏” 会自动出现，无需手工编写。
标题 + 自动关闭提示栏
标题 + 内容 + 自动关闭提示栏
标题 + 内容 + 底栏 + 自动关闭提示栏
JS API
在 JS 中调用以下 API，即可触发相应的功能。
各参数的含义详见 API 文档。
显示
需要使用 JS API 来把指定的弹框显示出来。
Dialog 组件支持在弹框中打开另一个弹框。多个弹框的打开顺序会保存在一个栈中，当栈中有多个弹框时，关闭当前弹框会恢复上一个弹框的显示。通过下面的按钮打开弹框，可以测试这一特性。
CMUI.dialog.show(elem)- 显示
CMUI.dialog.show(elem, {autoHideDelay: 3000})- 显示并设置自动隐藏
隐藏
CMUI.dialog.hide()此方法可以关闭当前显示的弹框。
在弹出的弹框中，点击关闭按钮可以测试隐藏效果；你也可以在控制台调用这个方法来测试效果。
构造一个弹框
CMUI.dialog.create(options)此方法可以动态构造一个新的弹框。
构造完成之后，这个新弹框会被添加到 DOM 中，但默认不显示。我们需要显式调用
CMUI.dialog.show()方法来将其打开，比如：var myDialog = CMUI.dialog.create({...}) CMUI.dialog.show(myDialog)以下示例按钮包含了构造和显示两个步骤。