jQuery UI API – 對話框部件（Dialog Widget）
所屬類別
用法
描述：在一個交互覆蓋層中打開內容。
版本新增： 1.0
對話框是一個懸浮窗口，包括一個標題欄和一個內容區域。 對話框窗口可以移動，重新調整大小，默認情況下通過'x' 圖標關閉。
如果內容長度超過最大高度，一個滾動條會自動出現。
一個底部按鈕欄和一個半透明的模式覆蓋層是常見的添加選項。
焦點
當打開一個對話框時，焦點會自動移動到滿足下麵條件的第一個項目：
當打開時，對話框部件（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> 。
依賴
- UI核心（UI Core）
- 部件庫（Widget Factory）
- 定位（Position）
- 按鈕部件（Button Widget）
- 可拖拽小部件（Draggable Widget） （可選的；當與
draggable選項一起使用時） - 可調整尺寸小部件（Resizable Widget） （可選的；當與
resizable選項一起使用時） - 特效核心（Effects Core） （可選的；當與
show和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>