팝업 가운데오게

by Kim Ara

HTML

<div id="wrap">
	<a href="#none" class="btn_pop" id="btn1">팝업</a>
	
	<div class="box1">
		메롱메롱		
	</div>
	<a href="#none" class="btn_pop" id="btn2">팝업</a>
	<div class="box2">
		바보바보		
	</div>
	<a href="#none" class="btn_pop" id="btn3">팝업</a>

</div>

<div id="pop_bg"></div>
<div class="pop_layer" id="pop_wrap">
	팝업1
</div>
<div class="pop_layer" id="pop_wrap2">
	팝업2
</div>

CSS

#pop_bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 998;
    display: none;
}
/* fixed */
#pop_wrap{    
	position: fixed;
	top: 50%;
	left: 50%;
	display: none;
	z-index: 999;
}
.pop_layer{
    width: 500px;
    height: 300px;
    background: #ddd;
}

.box1{
	width:100%;
	height:1000px;
	background:#c6f3ac
}
.box2{
	width:100%;
	height:1000px;
	background:#eaacf3
}

/* absolute */
#pop_wrap2{    
	position: absolute;
	top: 0;
	left: 50%;
	display: none;
	z-index: 999;
}
#pop_wrap2{
	background:#f1e096;
}

JavaScript

$(document).ready(function(){
		$('.btn_pop').click(function(){			

			var popWidth = $('.pop_layer').width();
			var popHeight = $('.pop_layer').height();
			var clientWidth = popWidth / 2;
			var clientHeight = popHeight / 2;

			$('#pop_bg').show();

			$('#pop_wrap').css({'marginLeft':'-'+ clientWidth +'px '  ,'marginTop':'-'+ clientHeight +'px'}).show();
		
			$('#pop_wrap2').css({'marginLeft':'-'+ clientWidth +'px' ,'top': (($(window).height() - $('.pop_layer').outerHeight()) / 2 + $(window).scrollTop()) + 'px'}).show();


		});

		$('#pop_bg').click(function(){
			$('#pop_bg').hide();
			$('#pop_wrap, #pop_wrap2').hide();
		});

		
	});