jQueryUI：ダイアログの生成

サンプルはこちら

See the Pen tHfer by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

jQueryUIで簡単にダイアログ表示を行うことができます。

HTML

<button class="dialogSwitch">Dialog Open</button>

<div id="dialog" title="ダイアログ">
 <p>ダイアログの内容。</p>
</div>

サンプルで要点となる構成はこれだけです。
ダイアログを開くためのボタンと、ダイアログを形成するレイヤーです。

なお表示されるダイアログのスタイルはjQueryUI標準のスタイルです。
jQueryUI用のCSSを適用しなければ自由にデザインすることもできます。

JavaScript

$(function() {
  $('#dialog').dialog({
    autoOpen: false,
    modal: true
  });

  $( ".dialogSwitch" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
});

2行目で「#dialog」に対して「dialog()」コンポーネントを実行しています。
これだけで「#dialog」レイヤーが自動的にダイアログ化されます。

オプション値で入れている「autoOpen: false」で初期状態では閉じた状態としています。
「modal」はtrueで有効にすると、ダイアログ表示中は他の要素を操作禁止にするモーダルウィンドウとなります。

7行目はボタンがクリックされた際、「#dialog」のダイアログウィンドウを開く処理を加えています。
「show()」や「toggle()」を使うのではなく、ダイアログはあくまで「dialog()」コンポーネントで操作することになります。