【jQuery入門】jQuery UIでモーダルダイアログを実装する

2023年3月30日2025年11月16日

ソースコード

<button id="opener">モーダル</button>

<div id="dialog" title="モーダル">
  ほげほげほげほげほげほげほげほげ
  <ul>
    <li>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ。</li>
    <li>ほげほげほげほげほげほげほげほげほげほげほげほげ。</li>
    <li>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ。</li>
    <li>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ。</li>
  </ul>
</div>

$(function () {
  $("#dialog").dialog({
    width: 600,
    height: 450,
    autoOpen: false,
    modal: true,
    show: "bounce",
    hide: "explode",
    buttons: {
      ダウンロード: function () {
        location.href = "http://jqueryui.com/download";
      },
      閉じる: function () {
        $(this).dialog("close");
      }
    }
  });

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

See the Pen
jQuery23-1 by shinjiezumi (@sezumi)
on CodePen.

モーダルダイアログの基本

内容を定義する

モーダルダイアログをdiv要素で定義し、jQuery UIから呼び出せるようにid属性を明記する。また、title属性にはダイアログのタイトルバーに表示すべきタイトルを記述する

モーダルダイアログの機能を適用する

dialogメソッドでダイアログを表示するためのさまざまな情報を指定する。

パラメータ名	意味	デフォルト値
width	ダイアログの幅	300
height	ダイアログの高さ	auto
autoOpen	ダイアログを自動的に開くか	true
modal	モーダルダイアログとするか (falseの場合はモードレスダイアログ)	false
show	ダイアログを開くときのアニメーションの効果	–
hide	ダイアログを閉じるときのアニメーションの効果	–
buttons	ダイアログで表示するボタン	–

buttonsパラメータにはハッシュで以下のように、表示するボタンとそれに関連付いた処理を指定する

    buttons: {
      'ダウンロード': function() {
        location.href = 'http://jqueryui.com/download';
      },
      '閉じる': function() { $(this).dialog('close'); }
    }

jQuery UIでは、メソッドに特定のキーワードを渡すことで、あらかじめ決められた処理を実行できる。
例えば $(this).dialog('close');では、現在のダイアログを閉じるという意味。

jQUery UI でのアニメーション機能

jQuery UIでは、jQuery標準のアニメーション機能に対して、さまざまな機能を追加している。そのひとつが追加エフェクト。

dialogメソッドで以下のように指定すると、bounceで飛び跳ねるような効果を、explodeで四方に壊れるように消える効果を実現できる。

    show: "bounce",
    hide: "explode",