オーバレイ表示をするjQueryプラグイン

JavaScript jQuery

特定の領域をオーバレイ表示するjQueryプラグインを作って見ました。
共円のページで、問題を表示する際に利用しています。
http://my-android-server.appspot.com/page/list.html?open=1


以下はテスト用のサンプル。
http://dl.dropbox.com/u/8518065/sample/20120119/test.html


プラグイン部分です。

(function($) {
	$.fn.overlay = function(overlayConfig) {
		var $target = $(this);
		var defaultOption = {
				position: 'fixed',
				bottom: 0,
				left: 0,
				right: 0,
				top: 0,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
			};
		var option = $.extend(defaultOption, overlayConfig);
		var $overlay = $('#overlay_area');
		if (!$overlay.length) {
			// 存在しない場合は作成
			$overlay = $('<div />').attr({
				id: 'overlay_area',
			});
			$('body').append($overlay);
		}

		$overlay.css(option);
		$overlay.append($target);

		$overlay.click(function(){
			// オーバレイ領域がクリックされた場合は隠す
			$overlay.hide();
			$target.hide();
		});
		$target.click(function(e) {
			// ターゲット領域がクリックされた場合はイベントの伝達を止める
			e.stopPropagation();
		});

		$overlay.show();
		$target.show();
	}
})(jQuery);


以下、サンプル用のHTML。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>テスト</title>
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="js/overlay.js"></script>
<script type="text/javascript">
$(function() {
	$('#overlay_button').click(function() {
		$('#overlay_target').overlay();
	});
	$('#overlay_button2').click(function() {
		$('#overlay_target2').overlay({
			backgroundColor: 'rgba(255, 0, 255, 0.4)'
			});
	});
});
</script>
<style>
.target {
	position: initial;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	display: none;
}
</style>
</head>
<body style="background-color: #8ae">

<input id="overlay_button" type="button" value="オーバレイ表示" />
<input id="overlay_button2" type="button" value="オーバレイ表示２" />

<div id="overlay_target"
		style="width: 300px; height: 400px; background-color: #eee;"
		class="target">
	テストです。
	<span style="background-color: #f00">背景色のテスト</span>
</div>
<div id="overlay_target2"
		style="width: 300px; height: 400px; background-color: #efe;"
		class="target">
	テスト２
</div>
</body>
</html>


以下のようにすることで、id="overlay_target"のdivタグをオーバレイ表示します。

$('#overlay_target').overlay();

また、オーバレイ領域の色を変更したい場合などは以下のようにします。

$('#overlay_target2').overlay({
	backgroundColor: 'rgba(255, 0, 255, 0.4)'
	});