nyaou.com

jQueryUI dialog を使ってモーダルダイアログ表示

2012-12-29 19:39:20

jQueryUI dialog を使って、モーダル表示を実装しました。
当サイト右上の (・v・) マークをクリックするとモーダルが表示されます。

今回はダイアログをモーダルとして表示する事に加え、ダイアログ画面以外のブラウザ領域をクリックすることによって、ダイアログが閉じるようにしました。
以下、実装までの手順。

jQueryUI 読込設定

まず、jQueryUI の読込設定。
今回は Google の CDN を使用しました。

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

1 行目が jQuery、2行目が jQueryUI、3行目が jQueryUI の CSS となります。
また、CSS に関しては、複数のデザインが予め用意されています。

CSS のデザイン一覧は下記サイトより確認できます。
Gallery から、見たいテザインの Edit ボタンをクリックすることにより、ページ下部にデザインが表示されます。

• ThemeRoller | jQuery UI

使用したいデザインがあれば、/base/ の部分をデザイン名に書き換えます。
たとえば、UI lightness に変更したい場合は以下のとおり。

変更前

http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css

変更後

http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css

※空白はハイフン(-)、大文字は小文字に直して設定します。

さらに、上記のサイトでは、独自に CSS デザインを簡単にカスタマイズすることもできます。
アクセスした時のページから色々いじることができるので、自分なりにテーマを作るのも良いかと思います。

WordPress で jQueryUI を使用する場合

WordPress で jQueryUI を使用する場合は、jQuery と関連付けるために、wp_enqueue_script を用いて function.php に以下のように記載するのが望ましいと思います。

function.php

function registerScripts() {
	wp_enqueue_script('jqueryUI', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'registerScripts');

wp_enqueue_script の第3引数は依存関係を設定でき、この場合は jQuery に依存することを示しています。

ちなみに CSS もできれば function.php で一括管理した方が良いかと思います。
そのへんについては、下記サイトが解りやすく解説しています。

• WordPress：functions.phpでJSやCSSを一元管理する方法とバージョン表記を消す方法

ダイアログの JavaScript コード

次に、ダイアログ表示用のスクリプトを HTML 内に記載します。

$(function(){
	//　モーダル初期設定
	$('#modal').dialog({
		autoOpen: false,  // 自動でオープンしない
		modal: true,      // モーダル表示する
		resizable: false, // リサイズしない
		draggable: false, // ドラッグしない
		show: "clip",     // 表示時のエフェクト
		hide: "fade"      // 非表示時のエフェクト
	});

	// .selecter クリック時にモーダル表示
	$('.selecter').click(function () {
		$('#modal').dialog('open');
		return false;
	});

	// モーダル画面以外のブラウザ領域をクリックで、モーダル非表示
	$(document).on('click', '.ui-widget-overlay', function(){
		$(this).prev().find('.ui-dialog-content').dialog('close');
	});
});

4 行目 autoOpen は、自動的にダイアログが表示されないようにしています。
デフォルトでは自動的にダイアログが表示されるため、ページ表示時にダイアログが表示されます。

5 行目 modal は、モーダル（ダイアログ表示時は、ダイアログ以外の領域操作不可）として表示します。
デフォルトでは、通常のダイアログ（ダイアログ表示時も他の領域操作可能）表示となります。

6 行目 resizable はリサイズ無効（デフォルトでは有効）、7 行目 draggable はドラッグ無効（デフォルトでは有効）としています。

8、9 行目は表示/非表示のエフェクト設定です。
エフェクトに関しては、Effect | jQuery UI から色々選べます。

13 ～ 15 行目で、要素 .selecter がクリックされた際に、ダイアログを表示するようにしています。

19 ～ 21 行目で、ダイアログ以外のブラウザ領域がクリックされた際に、ダイアログを閉じるようにしています。
$(document).on() に関しては、以下のサイトでの解説がわかり易かったです。

• .on() の使い方（jQuery1.7～） at ソフテル jQuery部

以上で、実装は完了です。
デモは当サイトの右上をクリック！

Tweet