Dialog / ダイアログ

スタイリッシュなダイアログを使いたい場合は、jQuery UI の Dialog が便利だ。

• jQuery UI の Dialog プラグインで、ダイアログを表示させる

  jQuery UI の Dialog プラグインについての記事。Dialog プラグインは、ダイアログを表示させるプラグイン。ページを開くと、ブラウザの中央に、ダイアログが出現。「×」アイコンをクリックすると閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズは変更できる。

• jQuery UI の Dialog のダイアログをボタンクリックで開く

  jQuery UI の Dialog プラグインのダイアログにおいて、ボタンクリックで開き、アニメーション動作で開閉させる方法。autoOpen と、show と、hide オプションを使う。ボタンクリックで開くためには、autoOpen オプションで、自動オープンを無効にしておく必要がある。

• jQuery UI の Dialog のダイアログをアニメーション動作で開閉

  jQuery UI の Dialog プラグインのダイアログを、アニメーション動作で開閉させる。アニメーション動作の指定には、show オプションとhide オプションを使う。アニメーション動作の種類と動作例（サンプル）についても。

• jQuery UI の Dialog プラグインのダイアログをページより目立たせる

  jQuery UI の Dialog プラグインのダイアログにおいて、ダイアログを閉じるまで、ページよりダイアログを目立たせ、ダイアログ以外の操作は一切できなくする方法。modal オプションを使う。

• jQuery UI の Dialog プラグインのダイアログのサイズを指定

  jQuery UI の Dialog プラグインにおいて、ダイアログのサイズを指定する方法。ダイアログのサイズを指定するには、height オプションと、width オプションを使う。

• jQuery UI の Dialog プラグインのダイアログの最小サイズを指定

  jQuery UI の Dialog プラグインにおいて、ダイアログの最小サイズを指定する方法。ダイアログの最小サイズを指定するには、minHeight オプションと、minWidth オプションを使う。

• jQuery UI の Dialog プラグインのダイアログの最大サイズを指定

  jQuery UI の Dialog プラグインにおいて、ダイアログの最大サイズを指定する方法。ダイアログの最大サイズを指定するには、maxHeight オプションと、maxWidth オプションを使う。

• jQuery UI の Dialog によるダイアログのサイズ変更（リサイズ）可否

  jQuery UI の Dialog プラグインにおける、ダイアログのサイズ変更（リサイズ）可否指定には、resizable オプションを使う。resizable オプションの値に、true を設定した場合、ダイアログのサイズを変更できる。false を設定した場合、ダイアログのサイズを変更できない。

• jQuery UI の Dialog プラグインのダイアログの表示位置を指定

  jQuery UI の Dialog プラグインにおいて、ダイアログを表示する位置を指定する方法。ダイアログの表示位置を指定するには、position オプションを使う。

• jQuery UI の Dialog によるダイアログのドラッグ移動可否

  jQuery UI の Dialog プラグインにおいて、ダイアログをドラッグ移動できないようにする方法。ダイアログのドラッグ移動可否指定には、draggable オプションを使う。draggable オプションの値に、true を設定した場合、ダイアログ内のタイトルをドラッグして移動できる。false を設定した場合、ダイアログをドラッグ移動できない。

• jQuery UI の Dialog プラグインのダイアログにクラスを追加

  jQuery UI の Dialog プラグインのダイアログに、クラスを追加する方法。クラス追加には、dialogClass オプションを使う。dialogClass オプションの値に、追加したいクラス名を指定する。

• jQuery UI の Dialog のダイアログを、ボタンクリックで閉じる

  jQuery UI の Dialog プラグインにおいて、「OK」ボタンをクリックすると、ダイアログを閉じるようにする方法。ボタンをクリックすることで、ダイアログを閉じるようにするには、buttons オプションを使う。

• jQuery UI の Dialog プラグインを使った送信確認ダイアログ

  jQuery UI の Dialog プラグインのダイアログを使った送信確認ダイアログ。buttons オプションを使い、ダイアログ内に「送信」と「キャンセル」の2つのボタンを表示させる。

• jQuery UI の Dialog プラグインのダイアログを使ったフォーム

  jQuery UI の Dialog プラグインのダイアログを使ったフォーム。フォームダイアログで入力したものを、ページで受け取り表示する。

• jQuery UI の Slider、Dialog、Button による複数評価項目フォーム

  jQuery UI の Slider プラグイン、Dialog プラグイン、Button プラグインなどを使い、複数の評価項目の評価送信フォームを作る方法。実装例（サンプル）は、好感度、実用性、デザイン性、独創性、技術力の5つの項目についての評価フォーム。「以上の通り評価する」を押すと確認ダイアログが現れる。

• jQuery UI の Dialog プラグインのダイアログをページ読み込み時に表示

  jQuery UI の Dialog プラグインにおいて、ページを読み込むと、自動的に、ダイアログを表示させる方法。ページ読み込み時に、自動表示させるには、autoOpen オプションに、true を指定する。ページを読み込むと、ダイアログを、ブラウザの上から100px、左から350pxの位置に表示。