对话框

样式

标准对话框

这是一个标准的对话框。

Example

Are you sure?

You'll lose all photos and media!

<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

Discard draft?

<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

Use Google's location service?

Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.

<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

Use Google's location service?

Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

<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

web shopping videos

tab 1

tab 2

tab 3

<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

Are you sure?

You'll lose all photos and media!

<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-cancle`	点击该元素会触发 `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 键时是否关闭对话框。

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 键时是否关闭对话框。

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 键时是否关闭对话框。
`type`	`string`	`text`	文本框的类型。 `text`: 单行文本框 `textarea`: 多行文本框
`maxlength`	`int`		最大输入字符数量
`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 类名列表