화면 가운데 레이어 팝업 띄우기 (중앙 정렬/가운데 고정) > jquery

<button type="button" class="btn_open">팝업 열기</button>
<div class="popup_box">
    <div class="popup_cont">
        팝업 내용
    </div>
</div>

<style type="text/css">
.btn_open { padding: 5px 10px; background: #759587; border: 0; color: #fff; cursor: pointer; }
#mask { display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opacity: 0.5; z-index: 9998; }
* html #mask { position: absolute; }
.popup_box { display: none; width: 300px; height: 300px; position: fixed; top: 50%; left: 50%; background: #fff; border: 1px solid #000; z-index: 9999; }
* html .popup_box { position: absolute; }
.popup_cont { padding: 20px; }
.btn_close { width: 30px; height: 25px; position: absolute; top: 0px; right: 0px; background: #000; border: 0; color: #fff; cursor: pointer; }	
</style>

<script type="text/javascript">
<!--
$(function(){
	$(".popup_box").hide()
	$("body").append("<div id='mask'></div>");
	
	$("#mask").click(function(){
		$(this).hide();
		$(".popup_box").hide();
	});
	
	$(".btn_open").click(function(){
		$("#mask").show();
		$(".popup_box").show().html("<button type='button' class='btn_close'>x</button>"+$("+div",this).html()).css({
			marginTop:"-"+$(".popup_box").height()/2+"px" , 
			marginLeft:"-"+$(".popup_box").width()/2+"px" 
		});
        
		$(".btn_close").click(function(){
			$("#mask").hide();
			$(".popup_box").hide();
		});
		return false;
	});
});	
//-->
</script>