Client-side/SCRIPT

jQuery를 이용한 배경이 가려진 레이어 팝업 뛰우기

그곰 2011. 11. 17. 10:59

참조 : http://blog.naver.com/bluecat81/90104506981

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>배경이 가려진 레이어 팝업 뛰우기</title>
<style> 
/* 마스크 뛰우기 */
 #mask {  
   position:absolute;  
   z-index:9000;  
   background-color:#000;  
   display:none;  
   left:0;
   top:0;
 } 
 
/*
 팝업으로 뜨는 윈도우 css  
*/ 
 .window{
   display: none;
   position:absolute;  
   left:50%;
   top:50px;
   margin-left: -500px;
   width:1000px;
   height:500px;
   background-color:#FFF;
   z-index:10000;   
 }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
//<![CDATA[
	function wrapWindowByMask(){
		//화면의 높이와 너비를 구한다.
		var maskHeight = $(document).height();  
		var maskWidth = $(window).width();  
		   
		//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
		$('#mask').css({'width':maskWidth,'height':maskHeight});  
		//애니메이션 효과 - 일단 0초동안 까맣게 됐다가 60% 불투명도로 간다.
		$('#mask').fadeIn(0);      
		$('#mask').fadeTo("slow",0.6);    
		//윈도우 같은 거 띄운다.
		$('.window').show();
	}
	$(document).ready(function(){
		//검은 막 띄우기
		$('.openMask').click(function(e){
			e.preventDefault();
			wrapWindowByMask();
		});
		//닫기 버튼을 눌렀을 때
		$('.window .close').click(function (e) {  
			//링크 기본동작은 작동하지 않도록 한다.
			e.preventDefault();  
			$('#mask, .window').hide();  
		});       
		//검은 막을 눌렀을 때
//		$('#mask').click(function () {  
//		    $(this).hide();  
//		    $('.window').hide();  
//		});      
	});
//]]>
</script>
</head>
<body>
	<div id = "wrap"> 
		<div id = "container">  
			<div id="mask"></div>
			<div class="window">
				<p style="width:1000px;height:500px;text-align:center;vertical-align:middle;">팝업 내용 입력</p>
				<p style="text-align:center; background:#ffffff; padding:20px;"><a href="#" class="close">닫기X</a></p>
			</div>
			<table border="0" cellpadding="0" cellspacing="0" width="100%">       
				<tr>
					<td align="center">
					<a href="#" class="openMask">레이어 팝업 발생</a>
					</td>
				</tr>       
			</table>
		</div>
	</div>
</body>
</html>
저작자표시