# Dialog Widget
Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets")
## version added: 1.0
**Description:** 在一個交互覆蓋層中打開內容。
## QuickNav[Examples](#entry-examples)
### Options
+ [appendTo](#option-appendTo)
+ [autoOpen](#option-autoOpen)
+ [buttons](#option-buttons)
+ [closeOnEscape](#option-closeOnEscape)
+ [closeText](#option-closeText)
+ [dialogClass](#option-dialogClass)
+ [draggable](#option-draggable)
+ [height](#option-height)
+ [hide](#option-hide)
+ [maxHeight](#option-maxHeight)
+ [maxWidth](#option-maxWidth)
+ [minHeight](#option-minHeight)
+ [minWidth](#option-minWidth)
+ [modal](#option-modal)
+ [position](#option-position)
+ [resizable](#option-resizable)
+ [show](#option-show)
+ [title](#option-title)
+ [width](#option-width)
### Methods
+ [close](#method-close)
+ [destroy](#method-destroy)
+ [isOpen](#method-isOpen)
+ [moveToTop](#method-moveToTop)
+ [open](#method-open)
+ [option](#method-option)
+ [widget](#method-widget)
### Extension Points
+ [_allowInteraction](#method-_allowInteraction)
### Events
+ [beforeClose](#event-beforeClose)
+ [close](#event-close)
+ [create](#event-create)
+ [drag](#event-drag)
+ [dragStart](#event-dragStart)
+ [dragStop](#event-dragStop)
+ [focus](#event-focus)
+ [open](#event-open)
+ [resize](#event-resize)
+ [resizeStart](#event-resizeStart)
+ [resizeStop](#event-resizeStop)
對話框是一個懸浮窗口,包括一個標題欄和一個內容區域。對話框窗口可以移動,重新調整大小,默認情況下通過 'x' 圖標關閉。
如果內容長度超過最大高度,一個滾動條會自動出現。
一個底部按鈕欄和一個半透明的模式覆蓋層是常見的添加選項。
### 焦點
當打開一個對話框時,焦點會自動移動到滿足下面條件的第一個項目:
1. 帶有 `autofocus` 屬性的對話框內的第一個元素
2. 對話框內容內的第一個 [`:tabbable`](/tabbable-selector/) 元素
3. 對話框按鈕面板內的第一個 [`:tabbable`](/tabbable-selector/) 元素
4. 對話框的關閉按鈕
5. 對話框本身
當打開時,對話框部件(Dialog Widget)確保通過 tab 切換對話框內元素間的焦點,不包括對話框外的元素。模態對話框防止鼠標用戶點擊對話框外的元素。
當關閉對話框時,焦點自動返回到之前對話框打開時獲得焦點的元素上。
### 隱藏關閉按鈕
在一些情況下,您可能想要隱藏關閉按鈕,例如,在按鈕面板中已經有一個關閉按鈕的情況。最好的解決方法是通過 CSS。作為實例,您可以定義一個簡單的規則,比如:
```
.no-close .ui-dialog-titlebar-close {
display: none;
}
```
然后,您可以添加 `no-close` class 到任意的對話框,用來隱藏關閉按鈕:
```
$( "#dialog" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
```
### 主題
對話框部件(Dialog Widget)使用 [jQuery UI CSS 框架](/theming/css-framework/) 來定義它的外觀和感觀的樣式。如果需要使用對話框指定的樣式,則可以使用下面的 CSS class 名稱:
* `ui-dialog`:對話框的外層容器。
* `ui-dialog-titlebar`:包含對話框標題和關閉按鈕的標題欄。
* `ui-dialog-title`:對話框文本標題周圍的容器。
* `ui-dialog-titlebar-close`:對話框的關閉按鈕。
* `ui-dialog-content`:對話框內容周圍的容器。這也是部件被實例化的元素。
* `ui-dialog-buttonpane`:包含對話按鈕的面板。只有當設置了 [`buttons`](#option-buttons) 選項時才呈現。
* `ui-dialog-buttonset`:按鈕周圍的容器。
此外,當設置了 [`modal`](#option-modal) 選項時,一個帶有 `ui-widget-overlay` class 名稱的元素被追加到 `<body>`。
### 依賴
* [UI 核心(UI Core)](/category/ui-core/)
* [部件庫(Widget Factory)](/jQuery.widget/)
* [定位(Position)](/position/)
* [按鈕部件(Button Widget)](/button/)
* [可拖拽小部件(Draggable Widget)](/draggable/) (可選的;當與 [`draggable`](#option-draggable) 選項一起使用時)
* [可調整尺寸小部件(Resizable Widget)](/resizable/) (可選的;當與 [`resizable`](#option-resizable) 選項一起使用時)
* [特效核心(Effects Core)](/category/effects-core/)(可選的;當與 [`show`](#option-show) 和 [`hide`](#option-hide) 選項一起使用時)
### 其他注意事項:
* 該部件要求一些功能性的 CSS,否則將無法工作。如果您創建了一個自定義的主題,請使用小部件指定的 CSS 文件作為起點。
## Options
### appendTo**Type:** [Selector](http://api.jquery.com/Types/#Selector)
**Default:** `"body"`
dialog(和遮罩層,如果[modal](#option-modal)存在)應該被追加到哪個元素。
**注意:**當dialog處于打開狀態的時候`appendTo`選項不應該被改變。(version added: 1.10.0)**Code examples:**
初始化帶有指定 `appendTo`選項的 dialog:
```
$( ".selector" ).dialog({ appendTo: "#someElem" });
```
在初始化后,獲取或設置`appendTo` 選項:
```
// getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
// setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );
```
### autoOpen**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `true`當設置為 `true` 時, dialog 會在初始化時自動打開. 如果為 `false` dialog 將會繼續隱藏直到調用[`open()`](#method-open)方法 。**Code examples:**
初始化帶有指定 `autoOpen`選項的 dialog:
```
$( ".selector" ).dialog({ autoOpen: false });
```
在初始化后,獲取或設置`autoOpen` 選項:
```
// getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
// setter
$( ".selector" ).dialog( "option", "autoOpen", false );
```
### buttons**Type:** [Object](http://api.jquery.com/Types/#Object) or [Array](http://api.jquery.com/Types/#Array)
**Default:** `{}`指定哪些按鈕應該在dialog上顯示。 回調的上下文是dialog元素(愚人碼頭注:`this`指向); 如果你需要訪問按鈕, 可以利用事件對象的目標元素。**支持多個類型:**
* **Object**: 鍵是按鈕標簽,值是點擊相關按鈕時執行的回調函數。
* **Array**: 該數組的每個元素必須是 一個定義特性,屬性,和按鈕上設置的事件處理程序的對象。
**Code examples:**
初始化帶有指定 `buttons`選項的 dialog:
```
$( ".selector" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
```
在初始化后,獲取或設置`buttons` 選項:
```
// getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
// setter
$( ".selector" ).dialog( "option", "buttons", [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] );
```
### closeOnEscape**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `true`指定具有焦點的dialog,在用戶按下退出(ESC)鍵時,是否應該關閉 。**Code examples:**
初始化帶有指定 `closeOnEscape`選項的 dialog:
```
$( ".selector" ).dialog({ closeOnEscape: false });
```
在初始化后,獲取或設置`closeOnEscape` 選項:
```
// getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
// setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );
```
### closeText**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"close"`指定關閉按鈕的文本。 注意,關閉文本在使用標準的主題時,是隱藏的(visibly:hidden)。**Code examples:**
初始化帶有指定 `closeText`選項的 dialog:
```
$( ".selector" ).dialog({ closeText: "hide" });
```
在初始化后,獲取或設置`closeText` 選項:
```
// getter
var closeText = $( ".selector" ).dialog( "option", "closeText" );
// setter
$( ".selector" ).dialog( "option", "closeText", "hide" );
```
### dialogClass**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `""`在使用額外附加的主題時,指定dialog的類名稱,這些樣式添加到dialog上。**Code examples:**
初始化帶有指定 `dialogClass`選項的 dialog:
```
$( ".selector" ).dialog({ dialogClass: "alert" });
```
在初始化后,獲取或設置`dialogClass` 選項:
```
// getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
// setter
$( ".selector" ).dialog( "option", "dialogClass", "alert" );
```
### draggable**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `true`如果設置為`true`, dialog將可以使用標題欄實現拖動。需要包含 [jQuery UI Draggable 部件](/draggable/)。**Code examples:**
初始化帶有指定 `draggable`選項的 dialog:
```
$( ".selector" ).dialog({ draggable: false });
```
在初始化后,獲取或設置`draggable` 選項:
```
// getter
var draggable = $( ".selector" ).dialog( "option", "draggable" );
// setter
$( ".selector" ).dialog( "option", "draggable", false );
```
### height**Type:** [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String)
**Default:** `"auto"`設置對話框的高度(單位:像素)。**支持多個類型:**
* **Number**: 高度,單位:像素。
* **String**: 唯一支持的字符串值為`"auto"`,這將使對話框高度根據其內容進行自動調整。
**Code examples:**
初始化帶有指定 `height`選項的 dialog:
```
$( ".selector" ).dialog({ height: 400 });
```
在初始化后,獲取或設置`height` 選項:
```
// getter
var height = $( ".selector" ).dialog( "option", "height" );
// setter
$( ".selector" ).dialog( "option", "height", 400 );
```
### hide**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object)
**Default:** `null`dialog關閉(隱藏)時的動畫效果。**支持多個類型:**
* **Boolean**: 當設置為`false`, 將不使用動畫效果,該dialog會立即被隱藏。 如果設置為`true`, 該dialog將會以默認的持續時間和默認的效果淡出。
* **Number**: 該dialog將以指定的時間和默認的效果淡出。
* **String**: 該dialog將使用指定的效果被隱藏。 該值可以是一個jQuery內置的動畫方法的名稱, 如`"slideUp"`, 或一個 [jQuery UI 效果](/category/effects/)的名稱, 如`"fold"`。 在這兩種情況下,將使用默認持續時間和默認的動畫效果。
* **Object**: 如果該值是一個對象, 那么 `effect`, `delay`, `duration`, 和`easing`可能要提供。 ?如果 `effect` 屬性包含一個jQuery方法的名稱, 那么該方法將被使用; 否則它被假定為是一個jQuery UI的效果的名稱。 當使用jQuery UI 支持額外設置 的效果 , 你可以在對象中包含那些設置 并且它們將被傳遞到的效果。如果`duration`持續時間或`easing`屬性被省略, 那么默認值將被使用。 如果`effect`被省略, 那么`"fadeOut"` 將被使用。如果`delay`被省略, 那么將不使用延遲。
**Code examples:**
初始化帶有指定 `hide`選項的 dialog:
```
$( ".selector" ).dialog({ hide: { effect: "explode", duration: 1000 } });
```
在初始化后,獲取或設置`hide` 選項:
```
// getter
var hide = $( ".selector" ).dialog( "option", "hide" );
// setter
$( ".selector" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } );
```
### maxHeight**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `false`dialog可以調整的最大高度,以像素為單位。**Code examples:**
初始化帶有指定 `maxHeight`選項的 dialog:
```
$( ".selector" ).dialog({ maxHeight: 600 });
```
在初始化后,獲取或設置`maxHeight` 選項:
```
// getter
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
// setter
$( ".selector" ).dialog( "option", "maxHeight", 600 );
```
### maxWidth**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `false`dialog可以調整的最大寬度,以像素為單位。**Code examples:**
初始化帶有指定 `maxWidth`選項的 dialog:
```
$( ".selector" ).dialog({ maxWidth: 600 });
```
在初始化后,獲取或設置`maxWidth` 選項:
```
// getter
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
// setter
$( ".selector" ).dialog( "option", "maxWidth", 600 );
```
### minHeight**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `150`dialog可以調整的最小高度,以像素為單位。**Code examples:**
初始化帶有指定 `minHeight`選項的 dialog:
```
$( ".selector" ).dialog({ minHeight: 200 });
```
在初始化后,獲取或設置`minHeight` 選項:
```
// getter
var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
// setter
$( ".selector" ).dialog( "option", "minHeight", 200 );
```
### minWidth**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `150`dialog可以調整的最小寬度,以像素為單位。**Code examples:**
初始化帶有指定 `minWidth`選項的 dialog:
```
$( ".selector" ).dialog({ minWidth: 200 });
```
在初始化后,獲取或設置`minWidth` 選項:
```
// getter
var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
// setter
$( ".selector" ).dialog( "option", "minWidth", 200 );
```
### modal**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果設置為`true`,該dialog將會有遮罩層; 頁面上的其他項目將被禁用, 即,不能交互。 遮罩層創建對話框下方,但高于其它頁面元素。**Code examples:**
初始化帶有指定 `modal`選項的 dialog:
```
$( ".selector" ).dialog({ modal: true });
```
在初始化后,獲取或設置`modal` 選項:
```
// getter
var modal = $( ".selector" ).dialog( "option", "modal" );
// setter
$( ".selector" ).dialog( "option", "modal", true );
```
### position**Type:** [Object](http://api.jquery.com/Types/#Object) or [String](http://api.jquery.com/Types/#String) or [Array](http://api.jquery.com/Types/#Array)
**Default:** `{ my: "center", at: "center", of: window }`
指定dialog顯示的位置。該dialog將會處理沖突 ?,使得盡可能多的dialog盡可能地可見。
_注意: 不贊成使用 `String` 和 `Array` 格式。_
**支持多個類型:**
* **Object**: 確定dialog打開時的位置。 ?`of`選項默認為窗口, 但您可以指定其他元素定位。 你可以參考[jQuery UI Position](/position/)實用工具,了解各種選項的更多細節。
* **String**:一個字符串,表示可視區內的位置。可能的值:`"center"`, `"left"`, `"right"`, `"top"`, `"bottom"`.
* **Array**: 一個包含相對于可見區域左上角_x, y_偏移坐標(單位為像素) 的數組, 或 一個可能值的字符串名稱。
**Code examples:**
初始化帶有指定 `position`選項的 dialog:
```
$( ".selector" ).dialog({ position: { my: "left top", at: "left bottom", of: button } });
```
在初始化后,獲取或設置`position` 選項:
```
// getter
var position = $( ".selector" ).dialog( "option", "position" );
// setter
$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button } );
```
### resizable**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `true`如果設置為`true`, 那么dialog允許調整大小。需要包含[jQuery UI Resizable widget](/resizable/)。**Code examples:**
初始化帶有指定 `resizable`選項的 dialog:
```
$( ".selector" ).dialog({ resizable: false });
```
在初始化后,獲取或設置`resizable` 選項:
```
// getter
var resizable = $( ".selector" ).dialog( "option", "resizable" );
// setter
$( ".selector" ).dialog( "option", "resizable", false );
```
### show**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object)
**Default:** `null`dialog打開(顯示)時的動畫效果。**支持多個類型:**
* **Boolean**: 當設置為`false`, 將不使用動畫效果,該dialog會立即被隱藏。 如果設置為`true`, 該dialog將會以默認的持續時間和默認的效果淡出。
* **Number**: 該dialog將以指定的時間和默認的效果淡出。
* **String**: 該dialog將使用指定的效果被隱藏。 該值可以是一個jQuery內置的動畫方法的名稱, 如`"slideUp"`, 或一個 [jQuery UI 效果](/category/effects/)的名稱, 如`"fold"`。 在這兩種情況下,將使用默認持續時間和默認的動畫效果。
* **Object**: 如果該值是一個對象, 那么 `effect`, `delay`, `duration`, 和`easing`可能要提供。 ?如果 `effect` 屬性包含一個jQuery方法的名稱, 那么該方法將被使用; 否則它被假定為是一個jQuery UI的效果的名稱。 當使用jQuery UI 支持額外設置 的效果 , 你可以在對象中包含那些設置 并且它們將被傳遞到的效果。如果`duration`持續時間或`easing`屬性被省略, 那么默認值將被使用。 如果`effect`被省略, 那么`"fadeOut"` 將被使用。如果`delay`被省略, 那么將不使用延遲。
**Code examples:**
初始化帶有指定 `show`選項的 dialog:
```
$( ".selector" ).dialog({ show: { effect: "blind", duration: 800 } });
```
在初始化后,獲取或設置`show` 選項:
```
// getter
var show = $( ".selector" ).dialog( "option", "show" );
// setter
$( ".selector" ).dialog( "option", "show", { effect: "blind", duration: 800 } );
```
### title**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `null`指定dialog的標題文字。 如果值為`null`,那么該dialog 元素上的`title`屬性將被使用。**Code examples:**
初始化帶有指定 `title`選項的 dialog:
```
$( ".selector" ).dialog({ title: "Dialog Title" });
```
在初始化后,獲取或設置`title` 選項:
```
// getter
var title = $( ".selector" ).dialog( "option", "title" );
// setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );
```
### width**Type:** [Number](http://api.jquery.com/Types/#Number)
**Default:** `300`設置dialog的寬度(單位:像素)。**Code examples:**
初始化帶有指定 `width`選項的 dialog:
```
$( ".selector" ).dialog({ width: 500 });
```
在初始化后,獲取或設置`width` 選項:
```
// getter
var width = $( ".selector" ).dialog( "option", "width" );
// setter
$( ".selector" ).dialog( "option", "width", 500 );
```
## Methods
### close()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
關閉dialog.
* 該方法不接受任何參數。
**Code examples:**
調用 close 方法:
```
$( ".selector" ).dialog( "close" );
```
### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
完全移除 dialog 功能. 這將使元素返回到之前的初始化狀態.
* 該方法不接受任何參數。
**Code examples:**
調用 destroy 方法:
```
$( ".selector" ).dialog( "destroy" );
```
### isOpen()Returns: [Boolean](http://api.jquery.com/Types/#Boolean)
確定 dialog 當前是否打開狀態。
* 該方法不接受任何參數。
**Code examples:**
調用 isOpen 方法:
```
var isOpen = $( ".selector" ).dialog( "isOpen" );
```
### moveToTop()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
移動dialog到所有dialog堆棧的頂部。(愚人碼頭注:理解為 z-index層級最高)
* 該方法不接受任何參數。
**Code examples:**
調用 moveToTop 方法:
```
$( ".selector" ).dialog( "moveToTop" );
```
### open()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
打開 dialog。
* 該方法不接受任何參數。
**Code examples:**
調用 open 方法:
```
$( ".selector" ).dialog( "open" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
獲取當前與指定的 `optionName` 關聯的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要獲取值的選項的名稱。
**Code examples:**
調用該方法:
```
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
獲取一個包含鍵/值對的對象,鍵/值對表示當前 dialog 選項哈希。
* 該方法不接受任何參數。
**Code examples:**
調用該方法:
```
var options = $( ".selector" ).dialog( "option" );
```
### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
設置與指定的 `optionName` 關聯的 dialog 選項的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要設置的選項的名稱。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要為選項設置的值。
**Code examples:**
調用該方法:
```
$( ".selector" ).dialog( "option", "disabled", true );
```
### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
為 dialog 設置一個或多個選項。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)要設置的 option-value 對。
**Code examples:**
調用該方法:
```
$( ".selector" ).dialog( "option", { disabled: true } );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一個包含 生成包裹元素 的 `jQuery` 對象。
* 該方法不接受任何參數。
**Code examples:**
調用 widget 方法:
```
var widget = $( ".selector" ).dialog( "widget" );
```
## 擴展點(Extension Points)
dialog小部件是[widget factory](http://www.css88.com/jquery-ui-api/jQuery.widget/)構建的,并且可以擴展。 當擴展部件時, 你必須覆蓋或添加新的行為到現有的方法。 下列方法被提供作為擴展點 用相同的API穩定性如上所列的[plugin methods](#methods)。 有關小部件擴展的更多信息, 請參閱[使用Widget Factory 擴展小部件](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/)。
### _allowInteraction( event )Returns: [Boolean](http://api.jquery.com/Types/#Boolean)
帶遮罩的對話框不允許用戶與對話框下面元素進行交互。 這可能會對 不屬于該dialog的子元素那些絕對定位的其他元素產生問題。 `_allowInteraction()`方法確定用戶是否應被允許與給定的目標元素進行交互; 因此, 它可用于不屬于該dialog的子元素白名單中的元素 但你希望用戶能夠使用。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
**Code examples:**
允許Select2插件在遮罩對話框中使用。 [`_super()`](/jquery.widget/#method-_super)調用確保該對話框中的元素仍然可以交互。
```
_allowInteraction: function( event ) {
return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}
```
## Events
### beforeClose( event, ui )Type: `dialogbeforeclose`
當dialog即將關閉時觸發。 如果取消,dialog將不會關閉。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 beforeClose 回調的 dialog:
```
$( ".selector" ).dialog({
beforeClose: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogbeforeclose 事件:
```
$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );
```
### close( event, ui )Type: `dialogclose`
當dialog關閉時觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 close 回調的 dialog:
```
$( ".selector" ).dialog({
close: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogclose 事件:
```
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );
```
### create( event, ui )Type: `dialogcreate`
在創建dialog時觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 create 回調的 dialog:
```
$( ".selector" ).dialog({
create: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogcreate 事件:
```
$( ".selector" ).on( "dialogcreate", function( event, ui ) {} );
```
### drag( event, ui )Type: `dialogdrag`
在dialog正在被拖動時觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **position**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的CSS position(位置)對象。
* **offset**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的offset position(偏移位置)對象。
**Code examples:**
初始化帶有指定 drag 回調的 dialog:
```
$( ".selector" ).dialog({
drag: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogdrag 事件:
```
$( ".selector" ).on( "dialogdrag", function( event, ui ) {} );
```
### dragStart( event, ui )Type: `dialogdragstart`
當用戶開始拖動dialog時觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **position**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的CSS position(位置)對象。
* **offset**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的offset position(偏移位置)對象。
**Code examples:**
初始化帶有指定 dragStart 回調的 dialog:
```
$( ".selector" ).dialog({
dragStart: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogdragstart 事件:
```
$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );
```
### dragStop( event, ui )Type: `dialogdragstop`
當dialog 停止拖動時觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **position**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的CSS position(位置)對象。
* **offset**Type: [Object](http://api.jquery.com/Types/#Object)dialog當前的offset position(偏移位置)對象。
**Code examples:**
初始化帶有指定 dragStop 回調的 dialog:
```
$( ".selector" ).dialog({
dragStop: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogdragstop 事件:
```
$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );
```
### focus( event, ui )Type: `dialogfocus`
當對話框獲取焦點時觸發此事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 focus 回調的 dialog:
```
$( ".selector" ).dialog({
focus: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogfocus 事件:
```
$( ".selector" ).on( "dialogfocus", function( event, ui ) {} );
```
### open( event, ui )Type: `dialogopen`
當對話框打開后,觸發此事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 open 回調的 dialog:
```
$( ".selector" ).dialog({
open: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogopen 事件:
```
$( ".selector" ).on( "dialogopen", function( event, ui ) {} );
```
### resize( event, ui )Type: `dialogresize`
當對話框大小改變時,觸發此事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小 之前的CSS position(位置)對象 。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的CSS position(位置)對象。
* **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小 之前的size(尺寸)對象 。
* **size**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的size(尺寸)對象。
**Code examples:**
初始化帶有指定 resize 回調的 dialog:
```
$( ".selector" ).dialog({
resize: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogresize 事件:
```
$( ".selector" ).on( "dialogresize", function( event, ui ) {} );
```
### resizeStart( event, ui )Type: `dialogresizestart`
當開始改變對話框大小時,觸發此事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小 之前的CSS position(位置)對象 。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的CSS position(位置)對象。
* **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小 之前的size(尺寸)對象 。
* **size**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的size(尺寸)對象。
**Code examples:**
初始化帶有指定 resizeStart 回調的 dialog:
```
$( ".selector" ).dialog({
resizeStart: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogresizestart 事件:
```
$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );
```
### resizeStop( event, ui )Type: `dialogresizestop`
當對話框改變大小后,觸發此事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **originalPosition**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小 之前的CSS position(位置)對象 。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的CSS position(位置)對象。
* **originalSize**Type: [Object](http://api.jquery.com/Types/#Object)對話框被調整大小 之前的size(尺寸)對象 。
* **size**Type: [Object](http://api.jquery.com/Types/#Object)對話框當前的size(尺寸)對象。
**Code examples:**
初始化帶有指定 resizeStop 回調的 dialog:
```
$( ".selector" ).dialog({
resizeStop: function( event, ui ) {}
});
```
綁定一個事件監聽器到 dialogresizestop 事件:
```
$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );
```
## Example:
#### 一個簡單的 jQuery UI 對話框(Dialog)。
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget