jQuery UIプラグインのdialog()メソッドでダイアログを作成する

jQuery UIプラグインのdialog()メソッドでダイアログを作成する方法をご紹介します。

ダイアログを表示する。

jQueryObject.dialog([options])

options

ダイアログのオプションを指定する。

プロパティ	説明
disabled	ダイアログが無効かどうかを指定する。
autoOpen	自動的にダイアログを開くかどうかを指定する。
buttons	ダイアログに表示するボタンを指定する。
closeOnEscape	ESCキーを押したときにダイアログを閉じるかどうかを指定する。
closeText	closeボタンのテキストを指定する。
dialogClass	クラス名を指定する。
draggable	ドラッグ可能かどうかを指定する。
height	ダイアログの高さを指定する。
hide	ダイアログのエフェクトを指定する。
maxHeight	ダイアログの最大の高さを指定する。
maxWidth	ダイアログの最大の幅を指定する。
minHeight	ダイアログの最小の高さを指定する。
minWidth	ダイアログの最小の幅を指定する。
modal	モーダルかどうかを指定する。
position	ダイアログの表示位置を指定する。
show	ダイアログを開くときのエフェクトを指定する。
stack	他のダイアログの上に積み重ねることができるかどうかを指定する。
title	ダイアログのタイトルを指定する。
width	ダイアログの横幅を指定する。
zIndex	z-indexを指定する。

イベントハンドラ

使用例

jQuery UIのダイアログを使用して、ボタンをクリックするとダイアログが表示されるサンプルを次に示す。

<script>
  $(function(){
    $('#button1').click(function(){
      $('#dialog1').dialog();
    });
  });
</script>

<div id="dialog1" title="タイトル" style="display:none">
  <p>ダイアログのサンプルです。</p>
</div>
<button id="button1">ダイアログを開く</button>

サンプルの実行結果を次に示す。

openイベント

openイベントは、ダイアログが開いたときに呼び出されるイベントである。

ダイアログが開いたときに、ボタンを無効化する例を示す。

$('#dialog1').dialog({
  open: function(event, ui) {
    $(".ui-dialog-buttonpane button:contains('削除')").button('disable');
  }
});

ダイアログが開いたときに、ボタンを有効化する例を示す。

$('#dialog1').dialog({
  open: function(event, ui) {
    $(".ui-dialog-buttonpane button:contains('削除')").button('enable');
  }
});

jQueryでダイアログにボタンを設定する例を示す。

<script>
  $('#button4').click(function(){
    $('#dialog4').dialog({
      buttons: {
        "はい": function(event) {
          alert($(event.target).text());
          $(this).dialog("close");
        },
        "いいえ": function() {
          $(this).dialog("close");
        }
      }
    });
  });
</script>

<div id="dialog1" title="タイトル" style="display:none">
  <p>ダイアログのサンプルです。</p>
</div>
<button id="button1">ダイアログを開く</button>

参考文献

OpenJS Foundation (2022) jQuery UI

OpenJS Foundation (2022) jQuery