ポップアップ

ポップアップもライブラリを使えば、実現できますが
これも自前で実装できるようになりましょう。
ポップアップの外側又はポップアップのcloseボタンをクリックすると閉じるようにしています。

HTML



 

	popup

CSS

#layer {
	display: none;	/* 初期表示は非表示 */
	position: absolute; 
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.20;
}
#popup {
	display: none;	/* 初期表示は非表示 */
	position: absolute; 
	left: 50%;
	top: 50%;
	width: 300px;
	height: 200px;
	margin-left: -150px;
	margin-top: -100px;
	background-color: white;
	border-radius: 5px;
	text-align: center;
}

JavaScript

$(function() {
	
	// show popupボタンクリック時の処理
	$('#show').click(function(e) {
		$('#popup, #layer').show();
	});
	
	// レイヤー/ポップアップのcloseボタンクリック時の処理
	$('#close, #layer').click(function(e) {
		$('#popup, #layer').hide();
	});
	
});

説明は以上です。