モーダルを自作してみた

仕事でモーダルを自作することがたまにあるので、ある程度カスタマイズすることを想定して、簡単なモーダルを作成してみました。
モーダルの中身はHTMLに埋め込んでおく想定です。

サンプルコード

.modalがモーダルを立ち上げるリンク、#modal01～modal03がモーダルの中身になります。
.modalのhrefと一致するモーダルの中身が表示されます。

HTML

<div id="contents">
	<a href="#modal01" class="modal">モーダル1</a>
	<a href="#modal02" class="modal">モーダル2</a>
	<a href="#modal03" class="modal">モーダル3</a>
</div>

<div id="modal01">
	<h2>モーダル1の中身です。</h2>
	<div class="image"><img src="http://placehold.it/400x300/E74C3C/000000" width="400" height="300" alt="" /></div>
	<a href="#modal02" class="modal-next modal-change">次へ</a>
	<a href="" class="modal-close">閉じる</a>
	<div class="modal-nav">
		<span>モーダル1へ</span>
		<a href="#modal02" class="modal-change">モーダル2へ</a>
		<a href="#modal03" class="modal-change">モーダル3へ</a>
	</div>
</div>

<div id="modal02">
	<h2>モーダル2の中身です。</h2>
	<div class="image"><img src="http://placehold.it/400x600/3498DB/000000" width="400" height="600" alt="" /></div>
	<a href="#modal01" class="modal-prev modal-change">前へ</a>
	<a href="#modal03" class="modal-next modal-change">次へ</a>
	<a href="" class="modal-close">閉じる</a>
	<div class="modal-nav">
		<a href="#modal01" class="modal-change">モーダル1へ</a>
		<span>モーダル2へ</span>
		<a href="#modal03" class="modal-change">モーダル3へ</a>
	</div>
</div>

<div id="modal03">
	<h2>モーダル3の中身です。</h2>
	<div class="image"><img src="http://placehold.it/400x300/2ECC71/000000" width="400" height="300" alt="" /></div>
	<a href="#modal02" class="modal-prev modal-change">前へ</a>
	<a href="" class="modal-close">閉じる</a>
	<div class="modal-nav">
		<a href="#modal01" class="modal-change">モーダル1へ</a>
		<a href="#modal02" class="modal-change">モーダル2へ</a>
		<span>モーダル3へ</span>
	</div>
</div>

CSS

モーダルに必要な部分のみ抜粋しています。

#modal-bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: #000000;
	opacity: 0.8;
	cursor: pointer;
}
#modal {
	position: absolute;
	z-index: 9999;
	left: 50%;
}
#modal01,
#modal02,
#modal03 {
	display: none;
	position: relative;
	width: 600px; /* モーダルの幅を指定 */
}

JavaScript

// モーダルの立ち上げ
function modalOpen(target) {
	// モーダルに必要な要素の挿入
	$('body').css('position', 'relative').append('<div id="modal-bg"></div><div id="modal"></div>');
	$(target).appendTo('#modal').show();
	$('#modal-bg').show();

	// モーダル高さが画面高さより狭いとき
	if ($('#modal').height() <= $(window).height() ) {
		// モーダルの位置指定(上下中央に配置)
		$('#modal').css({
			top: $(window).scrollTop() + ($(window).height() / 2) - ($('#modal').height() / 2),
			marginLeft: - $('#modal').width() / 2
		});
	// モーダル高さが画面高さより広いとき
	} else {
		// モーダルの位置指定(画面の上から10pxに配置)
		$('#modal').css({
			top: $(window).scrollTop() + 10,
			marginLeft: - $('#modal').width() / 2
		});
	}
}

// モーダルの中身切り替え
function modalChange(target) {
	// モーダルの中身を元に戻す
	$('#modal').children().clone().appendTo('body').hide();
	// モーダルの中身を削除
	$('#modal').html('');
	// 次のモーダルの中身を挿入
	$(target).appendTo('#modal').show();
}

// モーダルを閉じる
function modalClose() {
	// モーダルの中身を元に戻す
	$('#modal').children().clone().appendTo('body').hide();
	// モーダルと背景を削除
	$('#modal-bg').remove();
	$('#modal').html('').remove();
}

$(function() {
	// モーダルを開くとき
	$(document).on('click', 'a.modal', function() {
		var target = $(this).attr('href');
		modalOpen(target);
		return false;
	});

	// モーダルの中身を切り替えるとき
	$(document).on('click', 'a.modal-change', function() {
		var target = $(this).attr('href');
		modalChange(target);
		return false;
	});

	// モーダルを閉じるとき
	$(document).on('click', '#modal-bg, a.modal-close', function() {
		modalClose();
		return false;
	});
});

JavaScriptはコメントで書いてある通りですが、モーダルを開く関数、モーダルの中身を切り替える関数、モーダルを閉じる関数を用意しています。
a.modalをクリックしたときにモーダル立ち上げ、モーダル内でa.modal-changeをクリックしたときにモーダル内の切り替え、#modal-bgかa.modal-closeをクリックしたときにモーダルを閉じるように設定しています。

モーダルのデモページ