jQuery UI API - 對話框部件（Dialog Widget） · W3School jQuery UI 教程

# jQuery UI API - 對話框部件（Dialog Widget） ## 所屬類別 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**在一個交互覆蓋層中打開內容。 **版本新增：**1.0 對話框是一個懸浮窗口，包括一個標題欄和一個內容區域。對話框窗口可以移動，重新調整大小，默認情況下通過 'x' 圖標關閉。如果內容長度超過最大高度，一個滾動條會自動出現。一個底部按鈕欄和一個半透明的模式覆蓋層是常見的添加選項。 ### 焦點當打開一個對話框時，焦點會自動移動到滿足下面條件的第一個項目： 1. 帶有 `autofocus` 屬性的對話框內的第一個元素 2. 對話框內容內的第一個 [`:tabbable`](api-tabbable-selector.html) 元素 3. 對話框按鈕面板內的第一個 [`:tabbable`](api-tabbable-selector.html) 元素 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 框架](api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用對話框指定的樣式，則可以使用下面的 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）](ref-ui-core.html) * [部件庫（Widget Factory）](api-jQuery-widget.html) * [定位（Position）](api-position.html) * [按鈕部件（Button Widget）](api-button.html) * [可拖拽小部件（Draggable Widget）](api-draggable.html) （可選的；當與 [`draggable`](#option-draggable) 選項一起使用時） * [可調整尺寸小部件（Resizable Widget）](api-resizable.html) （可選的；當與 [`resizable`](#option-resizable) 選項一起使用時） * [特效核心（Effects Core）](ref-effects-core.html)（可選的；當與 [`show`](#option-show) 和 [`hide`](#option-hide) 選項一起使用時） ### 附加說明 * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## 實例一個簡單的 jQuery UI 對話框（Dialog）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>對話框部件（Dialog Widget）演示</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">打開對話框</button> <div id="dialog" title="對話框標題">我是一個對話框</div> <script> $( "#dialog" ).dialog({ autoOpen: false }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); </script> </body> </html> ```