jQueryでダイアログ表示を作成する

jQueryを使ってダイアログをつくる方法には、大きくわけてjQueryのライブラリを使い実装する方法と、jQueryだけで実装する方法の２つがあります。

今回は、jQuery UIというライブラリを使ってライブラリを実装する方法と、jQueryだけで実装する方法の２つを紹介します。

1 jQuery UIを使ったダイアログ
2 jQueryのみで作成するダイアログ

jQuery UIを使ったダイアログ

jQuery　UIとは、jQuery公式のUI用ライブラリです。これを使うことで、ダイアログ、カレンダーやドラッグ移動などの複雑な処理を簡単に実装することができます。

jQuery UIの導入

jQuery UI本体とテーマCSSを読み込みます。今回は、jQuery UI 1.11.4 と Smoothnessというテーマを読み込みます。

<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

参考：jQuery UIの使い方と基本サンプル

サンプル

シンプルなダイアログのサンプルです。ボタンをクリックしたらダイアログを表示するために、ダイアログとなる要素に対してあらかじめdisplay:none;を指定して非表示にしています。

<button id="open-sample-dialog">ダイアログを開く</button>
<div id="sample-dialog" title="サンプルダイアログ" style="display:none;">
  <p>ダイアログです</p>
</div>

次に、jQueryです。指定した要素に対して、jQuery UIのdialog()を使うことで、ダイアログとして表示します。

$("#open-sample-dialog").on("click", function(){
  $("#sample-dialog").dialog();
});

「ダイアログを開く」ボタンをクリックすることで、以下のように表示されます。

jquery-ui-dialog

ダイアログをカスタマイズ

ダイアログをカスタマイズする時は、jQuery UI公式ドキュメントのダイアログのページを参照してください。

jQuery UIを使うとライブラリの分だけやや読み込むが遅くなりますが、簡単に作成したい時はおすすめです。

jQueryのみで作成するダイアログ

jQuery UIを使いたくないという場合は、jQueryだけでも簡単に作成することができます。

サンプル

シンプルなボタンクリックでダイアログが開き、閉じるボタンでダイアログが閉じるというサンプルです。

HTMLは以下のようになります。ダイアログには、jQueryで扱うためにID属性(sample-dialog)を指定しています。

<div class="dialog" id="sample-dialog">
  <div class="dialog-header">
    <span class="dialog-title">サンプルダイアログ</span>
    <button type="button" class="dialog-close">
      閉じる☓
    </button>
  </div>
  <div class="dialog-content">
    <p>ダイアログです</p>
  </div>
</div>
<button id="open-sample-dialog">ダイアログを開く</button>

CSSは以下のようになります。ダイアログのleftプロパティは、次で説明するjQueryで指定します。

.dialog {
  overflow: hidden;
  position: absolute;
  top: 30%;
  height: auto;
  width: 300px;
  display: none;
  border:1px solid #aaa;
  z-index:1000;
}
.dialog-header {
  border: 1px solid #aaa;
  background: #cccccc;
  color: #222222;
  font-weight: bold;
  overflow: hidden;
  padding:5px;
}
.dialog-title {
  float: left;
}
.dialog-close {
  float: right;
  border: 1px solid #d3d3d3;
  background: #e6e6e6;
  font-weight: normal;
  color: #555555;
}
.dialog-content {
  position: relative;
  border: 0;
  padding: .5em 1em;
  background: #fff;
  overflow: auto;
  width: auto;
  height: auto;
}

jQueryは、以下の通りです。ダイアログをセンタリングするために、leftの値をウィンドウ幅とダイアログ幅から計算し表示します。

また、閉じるボタンをクリックした時に、ダイアログを非表示にします。

$("#open-sample-dialog").on("click", function(){
  //leftの値 = (ウィンドウ幅 -コンテンツ幅) ÷ 2
  var leftPosition = (($(window).width() - $("#sample-dialog").outerWidth(true)) / 2);
  //CSSを変更
  $("#sample-dialog").css({"left": leftPosition + "px"});
  //ダイアログを表示する
  $("#sample-dialog").show();
});
//閉じるボタンで非表示
$(".dialog-close").on("click", function(){
  $(this).parents(".dialog").hide();
});

「ダイアログを開く」ボタンをクリックすると、以下のように表示されます。

jquery-dialog