menuMDUI文档
color_lens
基于 Material Design 3 和 Web Components 的全新 mdui 2 现已发布，前往查看 mdui 2 开发文档。

对话框

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

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

调用方式

  1. 通过自定义属性调用
  2. 通过 JavaScript 调用

相关阅读

Material Design 设计规范：组件 - 对话框

样式

标准对话框

这是一个标准的对话框。

codeplay_arrow
示例
<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>

不含标题栏

这个对话框不含标题栏。

codeplay_arrow
示例
<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 即可将按钮设置为竖直排列。

codeplay_arrow
示例
<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 内部，标题和底部按钮就会随着滚动条滚动；反之标题和按钮将分别固定在顶部和底部，不随滚动条滚动。

codeplay_arrow
示例
<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。

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

codeplay_arrow
示例
<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 选择器。

codeplay_arrow
示例
<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);
运行

参数

参数名类型默认值说明
overlaybooleantrue打开对话框时是否显示遮罩。
historybooleantrue打开对话框时是否添加 url hash，若为 true，则打开对话框后可以通过浏览器的后退按钮或 Android 的返回键关闭对话框。
modalbooleanfalse是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
closeOnEscbooleantrue按下 Esc 键时是否关闭对话框。
closeOnCancelbooleantrue按下取消按钮时是否关闭对话框。
closeOnConfirmbooleantrue按下确认按钮时是否关闭对话框。
destroyOnClosedbooleanfalse关闭对话框后是否自动销毁对话框。

方法

方法名说明
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)
codeplay_arrow
示例
mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: '取消'
    },
    {
      text: '确认',
      onClick: function(inst){
        mdui.alert('点击确认按钮的回调');
      }
    }
  ]
});

参数

参数名类型默认值说明
titlestring对话框的标题。
contentstring对话框的内容。
buttonsarray按钮数组，每个按钮都是一个带按钮参数的对象（见下面表格）。
stackedButtonsbooleanfalse按钮是否垂直排列。
cssClassstring添加到 .mdui-dialog 上的 CSS 类。
historybooleantrue是否监听 hashchange 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
overlaybooleantrue打开对话框后是否显示遮罩层。
modalbooleanfalse是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
closeOnEscbooleantrue按下 Esc 键时是否关闭对话框。
destroyOnClosedbooleantrue关闭对话框后是否自动销毁对话框。
onOpenfunction打开动画开始时的回调。参数是对话框的实例。
onOpenedfunction打开动画结束时的回调。参数是对话框的实例。
onClosefunction关闭动画开始时的回调。参数是对话框的实例。
onClosedfunction关闭动画结束时的回调。参数是对话框的实例。

按钮的参数：

参数名类型默认值说明
textstring按钮文本。
boldbooleanfalse按钮文本是否加粗。
closebooleantrue点击按钮后是否关闭对话框。
onClickfunction点击按钮的回调函数。

mdui.alert()

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

mdui.alert(text, onConfirm, options)
mdui.alert(text, title, onConfirm, options)
codeplay_arrow
示例
// 仅含文本
mdui.alert('content');

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

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

// 含文本和回调
mdui.alert('content', function() {
  mdui.alert('点击了确认按钮');
});
  • text: 文本
  • title: （可选）标题
  • onConfirm: （可选）点击确认按钮的回调。参数是对话框的实例。
  • options: （可选）参数，见下表。
参数名类型默认值说明
confirmTextstringok确认按钮的文本。
historybooleantrue是否监听 hashchange 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
modalbooleanfalse是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
closeOnEscbooleantrue按下 Esc 键时是否关闭对话框。
closeOnConfirmbooleantrue按下确认按钮时是否关闭对话框。

mdui.confirm()

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

mdui.confirm(text, onConfirm, onCancel, options)
mdui.confirm(text, title, onConfirm, onCancel, options)
codeplay_arrow
示例
// 含文本和确认回调
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: （可选）参数，见下表。
参数名类型默认值说明
confirmTextstringok确认按钮的文本。
cancelTextstringcancel取消按钮的文本。
historybooleantrue是否监听 hashchange 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
modalbooleanfalse是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
closeOnEscbooleantrue按下 Esc 键时是否关闭对话框。
closeOnCancelbooleantrue按下取消按钮时是否关闭对话框。
closeOnConfirmbooleantrue按下确认按钮时是否关闭对话框。

mdui.prompt()

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

mdui.prompt(label, onConfirm, onCancel, options)
mdui.prompt(label, title, onConfirm, onCancel, options)
codeplay_arrow
示例
// 单行文本框
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: （可选）参数，见下表
参数名类型默认值说明
confirmTextstringok确认按钮的文本
cancelTextstringcancel取消按钮的文本
historybooleantrue是否监听 hashchange 事件，为 true 时可以通过 Android 的返回键或浏览器后退按钮关闭对话框。
modalbooleanfalse是否模态化对话框。为 false 时点击对话框外面的区域时关闭对话框，否则不关闭。
closeOnEscbooleantrue按下 Esc 键时是否关闭对话框。
closeOnCancelbooleantrue按下取消按钮时是否关闭对话框
closeOnConfirmbooleantrue按下确认按钮时是否关闭对话框
confirmOnEnterbooleanfalse按下 Enter 键时触发 onConfirm 回调函数。
typestringtext文本框的类型。
  • text: 单行文本框
  • textarea: 多行文本框
maxlengthint0最大输入字符数量
defaultValuestring''文本框的默认值

CSS 类名列表

类名说明
.mdui-dialog定义一个对话框组件。
.mdui-dialog-title定义对话框的标题。
.mdui-dialog-content定义对话框的内容。
.mdui-dialog-actions定义对话框的操作栏。
.mdui-dialog-actions-stacked使对话框操作栏的按钮竖直排列。
arrow_backPrevious
表格
arrow_forwardNext
菜单