对话框

MDUI 中的对话框是一个用途非常广的组件，经常被用来向用户询问信息，通知或警告用户。

同一时间只会有一个对话框处于显示状态。若当前对话框还未关闭就打开下一个对话框，那么下一个对话框会被加入队列，等当前对话框关闭后再打开。

调用方式

• 通过自定义属性调用
  
• 通过 JavaScript 调用
  

相关资料

Material Design 对话框设计规范

样式

标准对话框

这是一个标准的对话框。

在线运行

不含标题栏

这个对话框不含标题栏。

在线运行

竖排按钮

对话框底部的按钮默认水平排列。只需在 <div class="mdui-dialog-actions"></div> 上添加类 .mdui-dialog-actions-stacked 即可将按钮设置为竖直排列。

在线运行

固定标题和按钮

在对话框内容超出对话框高度时，.mdui-dialog-content 中的内容会产生滚动条。

如果将 .mdui-dialog-title 和 .mdui-dialog-actions 放到 .mdui-dialog-content 内部， 标题和底部按钮就会随着滚动条滚动；反之标题和按钮将分别固定在顶部和底部，不随滚动条滚动。

在线运行

自定义内容

对话框中只有 <div class="mdui-dialog"></div> 是必须的，该元素内的内容可以替换为任意 HTML。

下面例子中在对话框中放了一个 Tab 选项卡：

在线运行

调用方式

通过自定义属性调用

使用该方式无需编写 JavaScript 代码。只需在一个起控制作用的元素（例如：按钮）上添加 mdui-dialog="options" 属性即可。通过自定义属性调用时，需要额外添加一个 target 参数，用于指定被控制的对话框，它的值为被控制的对话框的 CSS 选择器。

在线运行

在对话框内的元素上可以添加一些属性来绑定事件，这些属性在使用 JavaScript 调用时也可以使用。

通过 JavaScript 调用

实例化组件：

// selector 为对话框的 CSS 选择器或 DOM 元素或 HTML 字符串
// options 为配置参数，见下面的参数列表
var inst = new mdui.Dialog(selector, options);

在线运行

参数

方法

事件

预定义对话框

MDUI 针对常用场景封装了几个预定义的对话框函数，这些预定义的对话框只通过 JavaScript 调用，无需编写 HTML 代码。

这些函数都返回对话框实例。

mdui.dialog()

打开一个对话框，标题、内容、按钮等都可以自定义。该方法比较通用，后面的 mdui.alert()、mdui.confirm()、mdui.prompt() 都是使用该方法进行的封装。

mdui.dialog(options)

在线运行

参数：

按钮的参数：

mdui.alert()

打开一个警告框，可以包含标题、内容和一个确认按钮：

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

• text: 文本
  
• title: （可选）标题
  
• onConfirm: （可选）点击确认按钮的回调。参数是对话框的实例。
  
• options: （可选）参数，见下表。
  

在线运行

mdui.confirm()

打开一个确认框，可以包含标题、内容、一个确认按钮和一个取消按钮：

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

• text: 文本
  
• title: （可选）标题
  
• onConfirm: （可选）点击确认按钮的回调。参数为对话框的实例。
  
• onCancel: （可选）点击取消按钮的回调。参数为对话框的实例。
  
• options: （可选）参数，见下表。
  

在线运行

mdui.prompt()

打开一个提示用户输入的对话框，可以包含标题、内容、文本框、一个确认按钮和一个取消按钮：

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

• label: 文本框浮动标签的文本
  
• title: （可选）标题
  
• onConfirm: （可选）点击确认按钮的回调。含两个参数，分别为文本框的值和对话框的实例。
  
• onCancel: （可选）点击取消按钮的回调。含两个参数，分别人文本框的值和对话框的实例。
  
• options: （可选）参数，见下表
  

在线运行

CSS 类名列表