jQuery UI API - 對話框部件（Dialog Widget）

所屬類別

小部件（Widgets）

用法

描述：在一個交互覆蓋層中打開內容。

版本新增：1.0

對話框是一個懸浮窗口，包括一個標題欄和一個內容區域。對話框窗口可以移動，重新調整大小，默認情況下通過 'x' 圖示關閉。

如果內容長度超過最大高度，一個滾動條會自動出現。

一個底部按鈕欄和一個半透明的模式覆蓋層是常見的添加選項。

焦點

當打開一個對話框時，焦點會自動移動到滿足下麵條件的第一個專案：

  1. 帶有 autofocus 屬性的對話框內的第一個元素
  2. 對話框內容內的第一個 :tabbable 元素
  3. 對話框按鈕面板內的第一個 :tabbable 元素
  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 框架 來定義它的外觀和感觀的樣式。如果需要使用對話框指定的樣式，則可以使用下麵的 CSS class 名稱：

  • ui-dialog：對話框的外層容器。
    • ui-dialog-titlebar：包含對話框標題和關閉按鈕的標題欄。
      • ui-dialog-title：對話框文本標題周圍的容器。
      • ui-dialog-titlebar-close：對話框的關閉按鈕。
    • ui-dialog-content：對話框內容周圍的容器。這也是部件被實例化的元素。
    • ui-dialog-buttonpane：包含對話按鈕的面板。只有當設置了 buttons 選項時才呈現。
      • ui-dialog-buttonset：按鈕周圍的容器。

此外，當設置了 modal 選項時，一個帶有 ui-widget-overlay class 名稱的元素被追加到 <body>。

依賴

附加說明

  • 該部件要求一些功能性的 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>