MDUI 中的對(duì)話框是一個(gè)用途非常廣的組件，經(jīng)常被用來(lái)向用戶詢問(wèn)信息，通知或警告用戶。

同一時(shí)間只會(huì)有一個(gè)對(duì)話框處于顯示狀態(tài)。若當(dāng)前對(duì)話框還未關(guān)閉就打開(kāi)下一個(gè)對(duì)話框，那么下一個(gè)對(duì)話框會(huì)被加入隊(duì)列，等當(dāng)前對(duì)話框關(guān)閉后再打開(kāi)。

調(diào)用方式

• 通過(guò)自定義屬性調(diào)用
  
• 通過(guò) JavaScript 調(diào)用
  

相關(guān)資料

Material Design 對(duì)話框設(shè)計(jì)規(guī)范

樣式

標(biāo)準(zhǔn)對(duì)話框

這是一個(gè)標(biāo)準(zhǔn)的對(duì)話框。

在線運(yùn)行

不含標(biāo)題欄

這個(gè)對(duì)話框不含標(biāo)題欄。

在線運(yùn)行

豎排按鈕

對(duì)話框底部的按鈕默認(rèn)水平排列。只需在 <div class="mdui-dialog-actions"></div> 上添加類 .mdui-dialog-actions-stacked 即可將按鈕設(shè)置為豎直排列。

在線運(yùn)行

固定標(biāo)題和按鈕

在對(duì)話框內(nèi)容超出對(duì)話框高度時(shí)，.mdui-dialog-content 中的內(nèi)容會(huì)產(chǎn)生滾動(dòng)條。

如果將 .mdui-dialog-title 和 .mdui-dialog-actions 放到 .mdui-dialog-content 內(nèi)部， 標(biāo)題和底部按鈕就會(huì)隨著滾動(dòng)條滾動(dòng)；反之標(biāo)題和按鈕將分別固定在頂部和底部，不隨滾動(dòng)條滾動(dòng)。

在線運(yùn)行

自定義內(nèi)容

對(duì)話框中只有 <div class="mdui-dialog"></div> 是必須的，該元素內(nèi)的內(nèi)容可以替換為任意 HTML。

下面例子中在對(duì)話框中放了一個(gè) Tab 選項(xiàng)卡：

在線運(yùn)行

調(diào)用方式

通過(guò)自定義屬性調(diào)用

使用該方式無(wú)需編寫(xiě) JavaScript 代碼。只需在一個(gè)起控制作用的元素（例如：按鈕）上添加 mdui-dialog="options" 屬性即可。通過(guò)自定義屬性調(diào)用時(shí)，需要額外添加一個(gè) target 參數(shù)，用于指定被控制的對(duì)話框，它的值為被控制的對(duì)話框的 CSS 選擇器。

在線運(yùn)行

在對(duì)話框內(nèi)的元素上可以添加一些屬性來(lái)綁定事件，這些屬性在使用 JavaScript 調(diào)用時(shí)也可以使用。

通過(guò) JavaScript 調(diào)用

實(shí)例化組件：

// selector 為對(duì)話框的 CSS 選擇器或 DOM 元素或 HTML 字符串
// options 為配置參數(shù)，見(jiàn)下面的參數(shù)列表
var inst = new mdui.Dialog(selector, options);

在線運(yùn)行

參數(shù)

方法

事件

預(yù)定義對(duì)話框

MDUI 針對(duì)常用場(chǎng)景封裝了幾個(gè)預(yù)定義的對(duì)話框函數(shù)，這些預(yù)定義的對(duì)話框只通過(guò) JavaScript 調(diào)用，無(wú)需編寫(xiě) HTML 代碼。

這些函數(shù)都返回對(duì)話框?qū)嵗?/p>

mdui.dialog()

打開(kāi)一個(gè)對(duì)話框，標(biāo)題、內(nèi)容、按鈕等都可以自定義。該方法比較通用，后面的 mdui.alert()、mdui.confirm()、mdui.prompt() 都是使用該方法進(jìn)行的封裝。

mdui.dialog(options)

在線運(yùn)行

參數(shù)：

按鈕的參數(shù)：

mdui.alert()

打開(kāi)一個(gè)警告框，可以包含標(biāo)題、內(nèi)容和一個(gè)確認(rèn)按鈕：

mdui.alert(text, onConfirm, options)

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

• text: 文本
  
• title: （可選）標(biāo)題
  
• onConfirm: （可選）點(diǎn)擊確認(rèn)按鈕的回調(diào)。參數(shù)是對(duì)話框的實(shí)例。
  
• options: （可選）參數(shù)，見(jiàn)下表。
  

在線運(yùn)行

mdui.confirm()

打開(kāi)一個(gè)確認(rèn)框，可以包含標(biāo)題、內(nèi)容、一個(gè)確認(rèn)按鈕和一個(gè)取消按鈕：

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

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

• text: 文本
  
• title: （可選）標(biāo)題
  
• onConfirm: （可選）點(diǎn)擊確認(rèn)按鈕的回調(diào)。參數(shù)為對(duì)話框的實(shí)例。
  
• onCancel: （可選）點(diǎn)擊取消按鈕的回調(diào)。參數(shù)為對(duì)話框的實(shí)例。
  
• options: （可選）參數(shù)，見(jiàn)下表。
  

在線運(yùn)行

mdui.prompt()

打開(kāi)一個(gè)提示用戶輸入的對(duì)話框，可以包含標(biāo)題、內(nèi)容、文本框、一個(gè)確認(rèn)按鈕和一個(gè)取消按鈕：

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

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

• label: 文本框浮動(dòng)標(biāo)簽的文本
  
• title: （可選）標(biāo)題
  
• onConfirm: （可選）點(diǎn)擊確認(rèn)按鈕的回調(diào)。含兩個(gè)參數(shù)，分別為文本框的值和對(duì)話框的實(shí)例。
  
• onCancel: （可選）點(diǎn)擊取消按鈕的回調(diào)。含兩個(gè)參數(shù)，分別人文本框的值和對(duì)話框的實(shí)例。
  
• options: （可選）參數(shù)，見(jiàn)下表
  

在線運(yùn)行

CSS 類名列表