モーダルウィンドウのサンプル

<div id="modal-content">
<p><a id="modal-close" class="button-link"></a>close</p>
</div>

$(this).blur() ;
if($("#modal-overlay")[0]) return false ;
$("body").append('
<div id="modal-overlay"></div>
');
$("#modal-overlay").fadeIn("slow");

centeringModalSyncer() ;

$( "#modal-content" ).fadeIn( "slow" ) ;

$( "#modal-overlay,#modal-close" ).unbind().click( function(){
  $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
    $('#modal-overlay').remove() ;
  } ) ;
} ) ;

// 他の領域かクローズでModalを消す
$( "#modal-overlay,#modal-close" ).unbind().click( function(){
  $("#modal-content,#modal-overlay").fadeOut("slow",function(){
    $("#modal-overlay").remove();
  });
});

// HTMLの流し込み
$("div#modal-content").html();

// 中心位置の調整
function centeringModalSyncer(){
 var w = $(window).width();
 var h = $(window).height();
 var cw = $("#modal-content").outerWidth({margin:true});
 var ch = $("#modal-content").outerHeight({margin:true});
 var pxleft = ((w - cw)/2);
 var pxtop = ((h - ch)/2);
 $("#modal-content").css({"left": pxleft + "px"});
 $("#modal-content").css({"top": pxtop + "px"});
}

<style type="text/css">
#modal-content {
	width: 50% ;
	height: 400px;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}
<style>