javascript, jquery 팝업 레이어 fadeIn(), fadeOut()

 

버튼을 누르면 폼 위에 팝업 레이어가 올라옵니다.

 

스스륵 올라옵니다.

바을 누르면 창이 닫힙니다.

따로 닫는 버튼을 만드시고 closelayer(); 함수를 호출하셔도 됩니다.

 

/* CSS */
<style>
.background{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%;  height:100%; z-index:100;}
.background .dimBackground {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity: .5; filter:alpha(opacity=70);}
.background .popuplayer{display:block;}
.popuplayer {background-color:#f1f1f1;width:500px;height:500px;display:none;position:absolute;top:50%;left:50%;z-index:10;color:#000;}
</style>



/* javascript jquery */
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function layer_popup(el){
	var $el = $(el); 
	var isDim = $el.prev().hasClass('dimBackground');
	isDim ? $('.background').fadeIn() : $el.fadeIn();
	var $elWidth = ~~($el.outerWidth()),
		$elHeight = ~~($el.outerHeight()),
		docWidth = $(document).width(),
		docHeight = $(document).height();
	
	if ($elHeight < docHeight || $elWidth < docWidth) {
		$el.css({
			marginTop: -$elHeight /2,
			marginLeft: -$elWidth/2
		});
	}
	else{
		$el.css({top: 0, left: 0});
	}
}
function closelayer(){
	var isDim = $(".popuplayer").prev().hasClass('dimBackground'); 
	isDim ? $('.background').fadeOut() : $el.fadeOut(); 
}
</script>



/* HTML */
<input type="button" Class="btn" value="팝업레이어 열기" onCLick="javascript:layer_popup('#popuplayer');">
<div class="background">
<div class="dimBackground" onClick='javascript:closelayer();'></div>
<div id="popuplayer" class="popuplayer">팝업레이어</div>
</div>