jQueryのUI API - ダイアログコンポーネント（ダイアログウィジェット）
カテゴリ
使用法
説明：インタラクティブオーバーレイで開くコンテンツ。
新バージョン：1.0
ダイアログは、タイトルバーとコンテンツ領域とを含むフローティングウィンドウです。 ダイアログウィンドウが閉じるには 'x'をアイコンでデフォルト、移動、サイズ変更することができます。
コンテンツの長さが最大高さを超える場合、スクロールバーが自動的に表示されます。
下のボタンバー、および半透明オーバーレイモードは、オプションを追加することが一般的です。
フォーカス
ダイアログボックスを開くと、フォーカスは自動的に最初の項目以下の基準を満たすために移動します。
-
autofocusプロパティダイアログ内の最初の要素 - 内の最初のダイアログボックスの内容
:tabbable要素 - ダイアログのボタン内の最初のパネル
:tabbable要素 - ダイアログボックスで、[閉じる]ボタン
- ダイアログボックス自体
開いているとき、ダイアログコンポーネント（ダイアログウィジェット）タブによって要素間でフォーカスを切り替えるためにボックスを確認して、ダイアログボックスには、外部の要素が含まれていません。 モーダルダイアログは、ユーザーがダイアログボックスの外側にマウスの要素をクリックしないようにします。
ダイアログを閉じると、フォーカスは自動的に前のダイアログボックスに戻り要素の焦点に開きます。
閉じるボタンを非表示にします
いくつかのケースでは、例えば、ボタンパネルがケースを閉じるためのボタンがあり、閉じるボタンを非表示にする場合があります。 最善の解決策は、CSSを介して行われます。 例として、次のような、簡単なルールを定義することができます。
{.NO-近い.ui-ダイアログタイトルバー、クローズ
表示：なし;
}
次に、あなたが追加することができno-close閉じるボタンを非表示に使用される任意のダイアログボックスに、クラスを：
$（ "#dialog」）.dialog（{
dialogClass：「ノークローズ」、
ボタン：[
{
テキスト：「OK」、
クリック：関数（）{
$（この）.dialog（ "クローズ"）;
}
}
]
}）;
テーマ
ダイアログコンポーネント（ダイアログウィジェット）を使用してjQueryのUI CSSフレームワークを 、そのスタイルのルックアンドフィールを定義します。 あなたがスタイルを指定するダイアログボックスを使用する必要がある場合は、以下のCSSクラス名を使用することができます。
-
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要素のクラス名をに追加され<body> 。
頼ります
- UIコア（UIコア）
- コンポーネントライブラリ（ウィジェットファクトリー）
- ロケーション（位置）
- Buttonコンポーネント（ボタンウィジェット）
- ドラッグ可能なウィジェット（ドラッグ可能なウィジェット） （オプション;ときに
draggableオプションと組み合わせて使用する場合のみ） - サイズ変更可能なウィジェット（サイズ変更可能なウィジェット） （オプション、および
resizableオプションと組み合わせて使用する場合のみ） - エフェクトコア（コアエフェクト） （オプション;
showとhideオプションで使用されます）
追加情報
- 一部は、いくつかの機能のCSSを必要とし、それ以外の場合は動作しません。 カスタムテーマを作成する場合は、出発点として、ウィジェット指定されたCSSファイルを使用します。
例
シンプルなjQueryのUIのダイアログ（対話）。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>]ダイアログコンポーネント（ダイアログウィジェット）デモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
<ボタンID = "開幕戦"> [開く]ダイアログ</ button>の
<DIVのID = "ダイアログ"タイトルは= "ダイアログのタイトル">私は、ダイアログ</ DIV>
<スクリプト>
$（ "#dialog」）.dialog（{AutoOpenプロパティ：偽}）;
$（ "#opener"）.click（関数（）{
$（ "#dialog」）.dialog（"開きます "）;
}）;
</スクリプト>
</ BODY>
</ HTML>