jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

jQuery：モーダルウィンドウを作ってみる

いろいろなサイトでよく見かけますが、背景が半透明で表示されるダイアログ調のウィンドウがあります。 そのウィンドウ以外は操作できないようになっているモーダルと、操作できるモードレスがありますが、 操作のできないモーダルウィンドウを作ってみます。

モーダルウィンドウが表示されるHTML

モーダルウィンドウが表示されるHTMLです。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>モーダルウィンドウのテスト</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="modal.css">
		<script src="jquery-1.8.0.min.js"></script>
		<script src="modal.js"></script>
	</head>
	<body>
		<button type="button" id="modalOpen">モーダルテスト</button>
	</body>
</html>

モーダルウィンドウを開く（閉じる）ためのイベント

そして、モーダルウィンドウを開く（閉じる）ためのイベントです。

// モーダルウィンドウを準備
// 直接HTMLに記述しても良いのですが、スクリプト側で準備しました
// appendした段階ではCSSで非表示になっている
$("body").append("<div id='underLayer'></div><div id='overLayer'></div>");

// モーダルウィンドウを表示
$("#modalOpen").click(function(){
	// 半透明の背景
	$("#underLayer").show();

	// 画面の中央に表示されるダイアログ
	$("#overLayer")
		.show()
		.html(
			"<p id='modalClose'>閉じる</p>" +
			"<p>これはモーダルウィンドウです</p>" +
			"<p>入力ボックスに入力できないことが確認できます</p>")
		.css({
			marginTop:"-" + $("#overLayer").height() / 2 + "px", 
			marginLeft:"-" + $("#overLayer").width() / 2 + "px"});

	// ダイアログの「閉じる」ボタンでモーダルウィンドウを閉じる
	$("#modalClose").click(function(){
		$("#underLayer").hide();
		$("#overLayer").hide();
	});
});

sample

CSSファイルを準備

以下がサンプルのCSS。

#underLayer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.60;
	filter:alpha(opacity=60);	/* IE独自プロパティ */
}
#overLayer{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 150px;
	padding: 30px;
	background-color: white;
}
#modalOpen {
	color: #006699;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}
#modalClose {
	color: #d01d33;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	text-align: right;
}

ページオープン時、underLayerとoverLayerはdisplay:noneで非表示になっています。
位置(position)は固定、underLayer(背景)は60%の透過色です。