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

ソースコード

<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メソッドでダイアログを表示するためのさまざまな情報を指定する。

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",

えず

東京でフリーランスのWebエンジニアやっています。 今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。 当面の目標はDevOps寄りのオールラウンダー。