jQuery UI を用いてオリジナルのダイアログを実装する方法!独自のボタンや選択肢も簡単に追加できる!

更新日: 公開日:2015/09/30
jQuery UI でダイアログを実装

JavaScript には、ダイアログボックスを表示する alert 関数や confirm 関数が標準で用意されています。しかし、メッセージを表示して「OK」「キャンセル」の選択をするのが精一杯なので、使い勝手はよくありません。

そこで JavaScript の拡張ライブラリである jQuery UI の Dialog プラグインを用いて、オリジナルのダイアログボックスを実装する手順について説明していきます。

jQuery UI を利用するには、前提として jQuery と jQuery UI のライブラリ、そしてデザインを定義した CSS のテーマファイルを読み込む必要があります。もしネットワーク環境にアクセスできるサイトであれば、CDN を利用して外部ファイルを直接読み込むことも可能です。

では具体的にどのような方法で実装するのか、サンプルプログラムをご覧ください。

jQuery UI でオリジナルのダイアログを実装

サンプルプログラムでは、ボタンのクリックイベントでダイアログを表示する例で説明します。

まずは基本的な実装からご覧ください。JavaScript の aleart 関数と同等の動きを実現します。

オリジナルダイアログのソースコード

オリジナルダイアログを実装【HTML】
<!--ダイアログを呼び出すボタン-->
<button id="btn_action">ダイアログ表示</button>

<!--ダイアログの内容-->
<div id="mydialog" title="サンプルタイトル">オリジナルダイアログをポップアップ表示するサンプル。</div>

ダイアログの内容は直接 HTML に記述します。スクリプト側でこの内容がダイアログであることを認識させるため、display: none の設定をする必要はありません。

title 属性に設定した内容が、ダイアログのタイトルとして表示されます。では、JavaScript 側の実装もご覧ください。

オリジナルダイアログを実装【JavaScript】
$(function(){
  // 画面表示時にダイアログが表示されないよう設定
  $("#mydialog").dialog({ autoOpen: false });
 
  // ボタンのクリックイベント
  $("#btn_action").click(function(){
      // ダイアログを表示する
      $("#mydialog").dialog("open");
  });
})

3行目の処理が display: none の役割を担っています。あとはイベントが呼び出されたタイミングで .dialog("open") をコールすればダイアログが表示されます。

オリジナルダイアログ表示サンプル

オリジナルダイアログをポップアップ表示するサンプル。

ダイアログの右肩にある [×] ボタンをクリックすれば、ダイアログを閉じることができます。

【応用】独自ダイアログにボタンやフォームオブジェクトを付ける

ダイアログの内容は HTML で記述できるので、フォームオブジェクトのような入力・選択項目を実装することも可能です。ただしダイアログ下部に表示するボタンは HTML 上には記述せず、全て JavaScript 上で実装します。

ではせっかくなので、HTML 部分はフォームオブジェクトが出力されるように実装してみましょう。

ボタン付き独自ダイアログ【HTML】
<!--ダイアログを呼び出すボタン-->
<button id="btn_action2">ダイアログ表示</button>

<!--ダイアログの内容-->
<div id="mydialog2" title="ボタン付きダイアログ">
  オリジナルダイアログをポップアップ表示するサンプル。<br />
  <!--ラジオボタンを配置-->
  <label><input type="radio" name="test" value="1" checked> 選択肢1</label><br />
  <label><input type="radio" name="test" value="2"> 選択肢2</label><br />
  <!--チェックボックスを配置-->
  <label><input type="checkbox" value="1">上記記載事項に同意します</label>
</div>

JavaScript の実装の前に、jQuery UI Dialog の呼び出し時に設定するオプション項目を確認しておきましょう。

jQuery UI Dialog のオプション項目

オプション内容
autoOpen初期表示時に自動的にダイアログを開くか設定。
(初期値: true)
widthダイアログの横幅を指定。単位はピクセルです。
(初期値: 300)
modalモーダルダイアログにしたい場合 true を設定。背景が少し暗くなります。
初期値: false
buttons記述形式は次の通り。
{ text: (ボタン名), click: (処理) }
click 以外のイベントを定義することも可能です。

オプション項目は Dialog 呼び出し時の引数として設定します。 {} カッコでくくり「オプション名 : 設定値」のフォーマットで書きます。複数オプションを設定する場合は、カンマ区切りで指定します。

では JavaScript を実装していきましょう。サンプルでは「ボタン1」「ボタン2」「ボタン3」と3つ用意しておきます。

ボタン付き独自ダイアログ【JavaScript】
$(function(){
  // ダイアログの初期設定
  $("#mydialog2").dialog({
    autoOpen: false,  // 自動的に開かないように設定
    width: 500,       // 横幅のサイズを設定
    modal: true,      // モーダルダイアログにする
    buttons: [        // ボタン名 : 処理 を設定
      {
        text: 'ボタン1',
        click: function(){
          alert("ボタン1をクリックしました");
        }
      },
      {
        text: 'ボタン2',
        click: function(){
          alert("ボタン2をクリックしました");
        }
      },
      {
        text: 'ボタン3',
        click: function(){
          // ダイアログを閉じる
          $(this).dialog("close");
        }
      }
    ]
  });

  $("#btn_action2").click(function(){
    // ダイアログの呼び出し処理
    $("#mydialog2").dialog("open");
  });
})

ボタン押下時のアクションは分かりやすいように alert 処理を呼び出してます。ボタン3はダイアログを閉じるための処理(キャンセルボタンと同等)を組み込みました。それぞれのボタン処理で独自の funcition を呼び出す作りにすれば、ソースコードの可読性は失われずに済みます。

またボタンを3つ並べるとダイアログの横幅が足りなくなるため、width オプションを利用して横幅を拡張しました。

ボタン付きオリジナルダイアログ表示サンプル

オリジナルダイアログをポップアップ表示するサンプル。




HTML に直接記述できるため、form タグ内に収めてしまえば、ボタン押下時にダイアログ内の入力項目を含めてサーバーへデータを送ることができます。

なおダイアログのボタンは JavaScript に定義しなくても、HTML 上で実装することも可能です。ただ .dialog() で定義が用意されているので、力づくでボタンを用意するのはおすすめできません。また、画面によって実装が異なるリスクを伴うので、実装方法のルールを取り決めておくと無難です。

以上、jQuery UI の Dialog プラグインを用いて、オリジナルのダイアログボックスを実装する方法でした。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。