jQueryでThickboxの様なモーダルウィンドウを簡易的に実装するサンプル

jQueryでのモーダルウィンドウライブラリは有名どころでは「Thickbox」や「LightBox」などさまざま。

これらのライブラリはサイトを制作する上でのさまざまな条件にも対応可能な素晴らしいライブラリですが、サイト上のちょっとしたところでモーダルウィンドウを使用する、って場合には何かと不必要な機能が多かったりするもの。

そこで「Thickbox」や「LightBox」の様な、大掛かりでは無いモーダルウィンドウを実装する際のサンプルスクリプトの紹介。

まずは基本的なボタン（リンク）をクリックすることで、モーダルウィンドウを立ち上げるタイプ。

≫サンプルはこちら（ページ内の「≫モーダルウィンドウOPEN」をクリック）

まず、スクリプトはこんな感じに。

$(function(){
	$('.modal').click(function(){
		$('html').css({overflow:'hidden'});
		if(document.getElementById("MDL_overlay") === null){
				$('body').append('＜div id="MDL_overlay"＞＜/div＞');
				if($.browser.msie && $.browser.version ＜ 7){
					$('body','html').css({height: '100%', width: '100%'});
					$('#MDL_overlay').css('position','absolute');
					$('#MDL_overlay').css('top',$(document).scrollTop());
				}
		}
		if(document.getElementById("MDL_window") === null){
				$('body').append(
					'＜div id="MDL_window"＞' +
					'＜h2＞モーダルウィンドウBOX＜/h2＞' +
					'＜p＞簡易的な説明テキストなど表示する場合などに。＜/p＞' +
					'＜p＞BOX外をクリック、もしくは「閉じる」ボタンをクリックで枠を閉じる。＜/p＞' +
					'＜div class="md_btn"＞' +
					'＜a href="javascript:void(0);" id="md_close"＞閉じる＜/a＞' +
					'＜/div＞' +
					'＜/div＞'
				);
				if($.browser.msie && $.browser.version ＜ 7){
					$('#MDL_window').css('position','absolute');
					$('#MDL_window').css('top',($(document).scrollTop() + $(window).height()/2) + "px");
				}
		}
		$('#MDL_overlay').show();
		$('#MDL_window').fadeIn('slow');
		$('#MDL_overlay,#md_close').click(function () {
			MDL_eliminate();
		});
		return false;
	});
});
function MDL_eliminate() {
	$('html').css({overflow:''});
	$('#MDL_overlay').fadeOut('fast');
	$('#MDL_window').fadeOut('fast');
	if($.browser.msie && $.browser.version ＜ 7){
		$("body","html").css({height: "auto", width: "auto"});
	};
	setTimeout('MDL_remove()',500);
}
function MDL_remove() {
	$('#MDL_overlay').remove();
	$('#MDL_window').remove();
}

特定のクラス名を付けたボタン（サンプルではクラス名「mdlw」が付いた＜a＞リンクを対象）をクリックすることで、＜div id=”MDL_overlay”＞と＜div id=”MDL_window”＞のID名でモーダルウィンドウ用＜div＞要素をソース上に追加しています。

実際のモーダルウィンドウBOXのソース＜div id=”MDL_window”＞はスクリプト内から生成しています。

サンプルで使用しているCSSは以下の様な感じに。
（BOXの大きさ装飾などはCSSで自由にカスタマイズ可能）

* {
	margin: 0;
	padding: 0;
}

/* ページ設定
-----------------------------*/
body {
	font-size: 12px;
	text-align: center;
	background: #ccc;
}

#container {
	margin: 0 auto;
	padding: 15px;
	width: 800px;
	text-align: left;
	background: #fff;
}

p {
	padding: 0 0 30px 0;
	font-size: 12px;
	line-height: 160%;
}

h1 {
	margin: 0 0 20px 0;
	padding: 0 0 5px 0;
	font-size: 14px;
	border-bottom: #ddd 2px solid;
}

a.modal {
	padding: 5px;
	width: 785px;
	text-align: center;
	font-weight: bold;
	display: inline-block;
	background: #ffcccc;
	border: #111 3px double;
}

/* モーダルウィンドウ
-----------------------------*/
#MDL_overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: #111;
	overflow: hidden;
	position: fixed;
	filter: alpha(opacity=90);
	opacity: 0.9;
	z-index: 1000;
}
#MDL_window {
	margin-top: -100px;
	margin-left: -200px;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 200px;
	text-align: left;
	display: none;
	background: #fff;
	border: #ff0000 5px solid;
	position: fixed;
	z-index: 1001
}
#MDL_window h2 {
	margin-bottom: 20px;
	padding: 10px 0;
	width: 400px;
	font-size: 14px;
	text-indent: 10px;
	border-bottom: #ff0000 1px dotted;
}
#MDL_window p {
	padding: 0 10px 20px 10px;
}

#MDL_window .md_btn {
	width: 100%;
	text-align: center;
}
#MDL_window .md_btn a {
	margin: 0 5px;
	padding: 5px;
	width: 100px;
	text-align: center;
	display: inline-block;
	background: #F5FFC5;
	border: #111 3px double;
}

続いて、ページロード時にモーダルウィンドウを立ち上げるタイプ。（認証などで使える？）

≫サンプルはこちら

スクリプトはclickアクションを$(window).loadに変えて、以下のような感じに。

$(window).load(function () {
	$('html').css({overflow:'hidden'});
	if(document.getElementById("MDL_overlay") === null){
			$('body').append('＜div id="MDL_overlay"＞＜/div＞');
			if($.browser.msie && $.browser.version ＜ 7){
				$('body','html').css({height: '100%', width: '100%'});
				$('#MDL_overlay').css('position','absolute');
				$('#MDL_overlay').css('top',$(document).scrollTop());
			}
	}
	if(document.getElementById("MDL_window") === null){
			$('body').append(
				'＜div id="MDL_window"＞' +
				'＜h2＞ページ認証BOX＜/h2＞' +
				'＜p＞年齢認証などで使用するページロード時に開くBOXサンプル。＜/p＞' +
				'＜p＞「OK」ボタンをクリックで枠を閉じる。＜br /＞' +
				'「CANCEL」ボタンをクリックでYahooサイトへリンク。＜/p＞' +
				'＜div class="md_btn"＞' +
				'＜a href="javascript:void(0);" id="md_ok"＞OK＜/a＞＜a href="http://www.yahoo.co.jp/" id="md_cancel"＞CANCEL＜/a＞' +
				'＜/div＞' +
				'＜/div＞'
			);
			if($.browser.msie && $.browser.version ＜ 7){
				$('#MDL_window').css('position','absolute');
				$('#MDL_window').css('top',($(document).scrollTop() + $(window).height()/2) + "px");
			}
	}
	$('#MDL_overlay').show();
	$('#MDL_window').fadeIn('slow');
	$('#md_ok').click(function () {
		MDL_eliminate();
	});
	return false;
});
function MDL_eliminate() {
	$('html').css({overflow:''});
	$('#MDL_overlay').fadeOut('fast');
	$('#MDL_window').fadeOut('fast');
	if($.browser.msie && $.browser.version ＜ 7){
		$("body","html").css({height: "auto", width: "auto"});
	};
	setTimeout('MDL_remove()',500);
}
function MDL_remove() {
	$('#MDL_overlay').remove();
	$('#MDL_window').remove();
}

モーダルウィンドウの実行方法以外はほとんど一つ目のスクリプトと変わりませんが、こっちではウィンドウオープン後、BOXエリア外をクリックしてもモーダルウィンドウBOXを閉じない構成にしてあります。
（CSSの構成は一つ目と同じです。）

両タイプ共にシンプルなスクリプトにしている（つもり…）ので、用途によってのカスタマイズも可能になっています。

簡易的モーダルウィンドウを使用する際に是非。。。