基于 Material Design 3 和 Web Components 的 mdui 2 已发布，查看 mdui 2 开发文档。

对话框

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

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

调用方式

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

样式

标准对话框

这是一个标准的对话框。

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

不含标题栏

这个对话框不含标题栏。

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

竖排按钮

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

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

固定标题和按钮

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

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

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

自定义内容

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

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

Example

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

调用方式

通过自定义属性调用

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

Example

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

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

属性	说明
`mdui-dialog-close`	点击该元素会触发 `close.mdui.dialog` 事件，并关闭对话框。
`mdui-dialog-cancel`	点击该元素会触发 `cancel.mdui.dialog` 事件。
`mdui-dialog-confirm`	点击该元素会触发 `confirm.mdui.dialog` 事件。

通过 JavaScript 调用

实例化组件：

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

运行

参数

参数名	类型	默认值	描述
`overlay`	`boolean`	`true`	打开对话框时是否显示遮罩。
`history`	`boolean`	`true`	打开对话框时是否添加 url hash，若为 true，则打开对话框后可用过浏览器的后退按钮或 Android 的返回键关闭对话框。
`modal`	`boolean`	`false`	是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
`closeOnEsc`	`boolean`	`true`	按下 Esc 键时是否关闭对话框。
`closeOnCancel`	`boolean`	`true`	按下取消按钮时是否关闭对话框。
`closeOnConfirm`	`boolean`	`true`	按下确认按钮时是否关闭对话框。
`destroyOnClosed`	`boolean`	`false`	关闭对话框后是否自动销毁对话框。

方法

方法名	描述
`open()`	打开对话框。
`close()`	关闭对话框。
`toggle()`	切换对话框的打开状态。
`getState()`	获取对话框状态。共包含四种状态（`opening`、`opened`、`closing`、`closed`）。
`destroy()`	销毁对话框。
`handleUpdate()`	重新调整对话框位置和滚动条高度。在打开对话框后，如果修改了对话框内容，需要调用该方法。

事件

事件	描述	目标	参数
`open.mdui.dialog`	对话框开始打开动画时，事件将被触发。	`<div class="mdui-dialog"></div>`	`event._detail.inst`：实例
`opened.mdui.dialog`	对话框结束打开动画时，事件将被触发。
`close.mdui.dialog`	对话框开始关闭动画时，事件将被触发。
`closed.mdui.dialog`	对话框结束关闭动画时，事件将被触发。
`cancel.mdui.dialog`	按下取消按钮时，事件将被触发。
`confirm.mdui.dialog`	按下确认按钮时，事件将被触发。

预定义对话框

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

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

mdui.dialog()

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

mdui.dialog(options)

Example

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: '取消'
    },
    {
      text: '确认',
      onClick: function(inst){
        mdui.alert('点击确认按钮的回调');
      }
    }
  ]
});

参数：

参数名	类型	默认值	说明
`title`	`string`		对话框的标题。
`content`	`string`		对话框的内容。
`buttons`	`array`		按钮数组，每个按钮都是一个带按钮参数的对象（见下面表格）。
`stackedButtons`	`boolean`	`false`	按钮是否垂直排列。
`cssClass`	`string`		添加到 `.mdui-dialog` 上的 CSS 类。
`history`	`boolean`	`true`	是否监听 `hashchange` 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
`overlay`	`boolean`	`true`	打开对话框后是否显示遮罩层。
`modal`	`boolean`	`false`	是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
`closeOnEsc`	`boolean`	`true`	按下 Esc 键时是否关闭对话框。
`destroyOnClosed`	`boolean`	`true`	关闭对话框后是否自动销毁对话框。
`onOpen`	`function`		打开动画开始时的回调。参数是对话框的实例。
`onOpened`	`function`		打开动画结束时的回调。参数是对话框的实例。
`onClose`	`function`		关闭动画开始时的回调。参数是对话框的实例。
`onClosed`	`function`		关闭动画结束时的回调。参数是对话框的实例。

按钮的参数：

参数名	类型	默认值	说明
`text`	`string`		按钮文本。
`bold`	`boolean`	`false`	按钮文本是否加粗。
`close`	`boolean`	`true`	点击按钮后是否关闭对话框。
`onClick`	`function`		点击按钮的回调函数。

mdui.alert()

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

mdui.alert(text, onConfirm, options)

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

Example

// 仅含文本
mdui.alert('content');

// 含标题和文本
mdui.alert('content', 'title');

// 含回调
mdui.alert('content', 'title', function(){
  mdui.alert('点击了确认按钮');
});

// 含文本和回调
mdui.alert('content', function(){
  mdui.alert('点击了确认按钮');
});

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

参数名	类型	默认值	说明
`confirmText`	`string`	`ok`	确认按钮的文本。
`history`	`boolean`	`true`	是否监听 `hashchange` 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
`modal`	`boolean`	`false`	是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
`closeOnEsc`	`boolean`	`true`	按下 Esc 键时是否关闭对话框。
`closeOnConfirm`	`boolean`	`true`	是否在按下确认按钮时是否关闭对话框。

mdui.confirm()

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

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

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

Example

// 含文本和确认回调
mdui.confirm('content', function(){
  mdui.alert('点击了确认按钮');
});

// 含文本、确认按钮和取消按钮回调
mdui.confirm('content',
  function(){
    mdui.alert('点击了确认按钮');
  },
  function(){
    mdui.alert('点击了取消按钮');
  }
);

// 含文本、标题和确认按钮回调
mdui.confirm('content', 'title', function(){
  mdui.alert('点击了确认按钮');
});

// 含文本、标题确认按钮和取消按钮回调
mdui.confirm('content', 'title',
  function(){
    mdui.alert('点击了确认按钮');
  },
  function(){
    mdui.alert('点击了取消按钮');
  }
);

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

参数名	类型	默认值	说明
`confirmText`	`string`	`ok`	确认按钮的文本。
`cancelText`	`string`	`cancel`	取消按钮的文本。
`history`	`boolean`	`true`	是否监听 `hashchange` 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
`modal`	`boolean`	`false`	是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
`closeOnEsc`	`boolean`	`true`	按下 Esc 键时是否关闭对话框。
`closeOnCancel`	`boolean`	`true`	是否在按下取消按钮时是否关闭对话框。
`closeOnConfirm`	`boolean`	`true`	是否在按下确认按钮时是否关闭对话框。

mdui.prompt()

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

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

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

Example

// 单行文本框
mdui.prompt('这是一个单行文本框',
  function (value) {
    mdui.alert('你输入了：' + value + '，点击了确认按钮');
  },
  function (value) {
    mdui.alert('你输入了：' + value + '，点击了取消按钮');
  }
);

// 多行文本框
mdui.prompt('这是一个多行文本框',
  function (value) {
    mdui.alert('你输入了：' + value + '，点击了确认按钮');
  },
  function (value) {
    mdui.alert('你输入了：' + value + '，点击了取消按钮');
  },
  {
    type: 'textarea'
  }
);

// 含标题
mdui.prompt('请输入文本', 'title',
  function (value) {
    mdui.alert('你输入了：' + value + '，点击了确认按钮');
  },
  function (value) {
    mdui.alert('你输入了：' + value + '，点击了取消按钮');
  }
);

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

参数名	类型	默认值	说明
`confirmText`	`string`	`ok`	确认按钮的文本
`cancelText`	`string`	`cancel`	取消按钮的文本
`history`	`boolean`	`true`	是否监听 `hashchange` 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
`modal`	`boolean`	`false`	是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
`closeOnEsc`	`boolean`	`true`	按下 Esc 键时是否关闭对话框。
`closeOnCancel`	`boolean`	`true`	是否在按下取消按钮时是否关闭对话框
`closeOnConfirm`	`boolean`	`true`	是否在按下确认按钮时是否关闭对话框
`confirmOnEnter`	`boolean`	`false`	按下 Enter 键时触发 `onConfirm` 回调函数。
`type`	`string`	`text`	文本框的类型。 `text`: 单行文本框 `textarea`: 多行文本框
`maxlength`	`int`	`0`	最大输入字符数量
`defaultValue`	`string`	`''`	文本框的默认值

CSS 类名列表

类名	效果
`.mdui-dialog`	定义一个对话框组件。
`.mdui-dialog-title`	定义对话框的标题。
`.mdui-dialog-content`	定义对话框的内容。
`.mdui-dialog-actions`	定义对话框的操作栏。
`.mdui-dialog-actions-stacked`	使对话框操作栏的按钮竖直排列。

表格

菜单

对话框

调用方式

相关阅读

样式

标准对话框

不含标题栏

竖排按钮

固定标题和按钮

自定义内容

调用方式

通过自定义属性调用

通过 JavaScript 调用

参数

方法

事件

预定义对话框

mdui.dialog()

mdui.alert()

mdui.confirm()

mdui.prompt()

CSS 类名列表