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の構成は一つ目と同じです。)

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner