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

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

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

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

jQuery UI のファイル読込みを CDN のライブラリから参照する方法

jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の３ファ...

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

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

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

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

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

<!--ダイアログを呼び出すボタン-->
<button id="btn_action">ダイアログ表示</button>

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

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

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

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

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

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

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

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

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

ではせっかくなので、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 のオプション項目

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

では 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 処理を呼び出してます。ボタン３はダイアログを閉じるための処理（キャンセルボタンと同等）を組み込みました。それぞれのボタン処理で独自の funcition を呼び出す作りにすれば、ソースコードの可読性は失われずに済みます。

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

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

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

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

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