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

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

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

jQuery UIを使ったダイアログ

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

jQuery UIの導入

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

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

サンプル

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

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

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

jquery-ui-dialog

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

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

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

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

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

サンプル

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

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

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

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

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

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

jquery-dialog

jQueryのみでダイアログを実装すると、jQuery UIと比べるとやや実装が面倒になりますが、より細かい点までカスタマイズしやくなっています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集