ダイアログボックスに表示する内容を定義する
jQuery UIでダイアログボックスを表示するには、ダイアログボックスに表示する内容を div要素で定義します。
div要素には id属性でIDを振り、title属性にダイアログのタイトルバーに表示する内容を指定します。div要素はそのままページ内に表示されてしまわないように、style属性に display: none; を指定して非表示にしておきましょう。
ダイアログボックスの例
たとえば上のダイアログボックスを表示する場合は、次のような div要素をHTMLに入れておきます。
<div id="dialog" title="ダイアログボックス" style="display : none;">
お名前を入力してください。<br />
<input type="text" name="yourname" id="yourname" size="20" />
</div>
なお、サンプルの画面写真にある「OK」「キャンセル」ボタンは、あとでJavaScript側で定義するため、div要素の中には書かなくてOKです。
ダイアログボックスを初期化する
次に、 dialog()メソッドを使って、ダイアログボックスを初期化します。初期化の際にはさまざまなオプションを指定できますが、一般的によく使うオプションだけを指定する場合のコードは以下のようになります。
$(要素).dialog({
bgiframe: true,
autoOpen: trueまたはfalse,
width: 幅,
modal: trueまたはfalse,
buttons: {
'ボタンのキャプション': function() {
ボタンがクリックされたときの処理
},
……
}
});
サンプルコード内に示した各オプションの指定方法は次のとおりです。
●要素の指定
1行目の「要素」の部分で、ダイアログの div要素を指定します。たとえば、先のサンプルの場合は、$('#dialog') でID名「dialog」の div要素を表します。
●autoOpen
autoOpen: true とすると、ダイアログを初期化すると同時にダイアログを表示します。autoOpen: false とするとダイアログは表示せず、初期化だけ済ませておきます。
●width
ダイアログボックスの幅を指定します。
●modal
modal: true とすると、ダイアログボックスが開いている間、背景のWebページがグレーになり、操作できない状態になります（モーダルダイアログ）。modal: false とすれば、ダイアログボックスを開いている間もWebページを操作できます（モードレスダイアログ）。
「modal: true」としてダイアログボックスを開いた時の表示
●buttons
ダイアログボックスに「OK」「キャンセル」などのボタンを表示したいときに、ボタンのキャプションとボタンがクリックされた時の処理を入れます。クリック時の処理を書く関数の中では、$(this) がダイアログボックスの div要素を表します。
