레이어 팝업을 사용할 때 팝업 배경에 뿌연 효과를 부여한 후 레이어 팝업을 출력하기 위한 방법
■ 레이어 팝업에 사용할 태그 구성
<div class="mask"></div>
<div class="window">
확인 / <span class="close">x닫기</span>
</div>
<div class="uplink">시작하기</div>
</div>
태그 구성은 레이어 팝업에 사용될 모든 태그를 '#layerpopup"으로 감쌉니다.
여기서 화면에 보이는 엘레멘트는 '.uplink' 엘레멘트이고 나머지 요소는 숨겨놓습니다. '.mask' 엘레멘트는 화면을 뿌옇게 하기 위한 엘레멘트이고, '.window' 엘레멘트는 팝업창의 내용이 위치합니다. 여기에 기본적으로 필요한 스타일을 부여합니다.
■ 스타일 지정
position:absolute;
left:0px;
top:0px;
display:none;
background-color:#000;
}
#layerpopup .window {
position:relative;
display:none;
}
.mask 엘레멘트와 .window 엘레멘트는 'display:none'으로 모두 숨겨져 있습니다.
여기서 중요한 것은 position 속성인데, .mask 엘레멘트가 화면을 뿌옇게 해주워야 하기 때문에 위치를 화면의 맨 왼쪽 끝을 시작으로 절대위치에 놓이게 됩니다.
position 속성에 absolute 값이 지정되면 모든 다른 엘레멘트보다 맨 위에 위치하기 때문에 팝업레이어를 클릭할 수 없습니다. 따라서 .window엘레멘트에도 position 속성을 지정하며 relative 값을 지정합니다.
이와 같은 방법은 .mask 엘레멘트가 .window 엘레멘트보다 먼저 나온 경우에만 가능하며, .mask 엘레멘트가 .window 엘레멘트보다 나중에 나온다면 z-index 값을 부여하며 .window 엘레멘트의 z-index 값이 .mask 엘레멘트의 z-index 값보다 커야 합니다.
■ jquery-1.4 를 사용하여 레이어팝업 구성
$( document ).ready( function() {
// 마스크로 감싼 후 팝업창 출력
$("#layerpopup .uplink").click( function( e ) {
wrapMask();
$("#layerpopup .window").show("slow");
});
// 마스크 및 파업창 닫기
$("#layerpopup .close").click( function( e ) {
e.preventDefault();
$("#layerpopup .uplink").show("slow");
$("#layerpopup .mask").hide("slow");
$("#layerpopup .window").hide("slow");
});
});
// 마스크를 생성해 전체화면을 덮고, 애니메이션 효과를 부여한 후 팝업창을 출력
function wrapMask() {
// 화면에 너비와 너비를 구함
var width = $(document).width();
var height = $(document).height();
// 링크 없애기
$("#layerpopup .uplink").hide("slow");
// 마스크를 화면의 높이와 너비로 만들어 전체화면에 덮기 및 애니매이션 효과
$("#layerpopup .mask").css({'width':width,'height':height});
$("#layerpopup .mask").fadeTo("fast", 0.2);
}
■ 전체 HTML 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test page</title>
<style type="text/css">
#layerpopup .mask {
position:absolute;
left:0px;
top:0px;
display:none;
background-color:#000;
}
#layerpopup .window {
position:relative;
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
// 마스크로 감싼 후 팝업창 출력
$("#layerpopup .uplink").click( function( e ) {
wrapMask();
$("#layerpopup .window").show("slow");
});
// 마스크 및 파업창 닫기
$("#layerpopup .close").click( function( e ) {
e.preventDefault();
$("#layerpopup .uplink").show("slow");
$("#layerpopup .mask").hide("slow");
$("#layerpopup .window").hide("slow");
});
});
// 마스크를 생성해 전체화면을 덮고, 애니메이션 효과를 부여한 후 팝업창을 출력
function wrapMask() {
// 화면에 너비와 너비를 구함
var width = $(document).width();
var height = $(document).height();
// 링크 없애기
$("#layerpopup .uplink").hide("slow");
// 마스크를 화면의 높이와 너비로 만들어 전체화면에 덮기 및 애니매이션 효과
$("#layerpopup .mask").css({'width':width,'height':height});
$("#layerpopup .mask").fadeTo("fast", 0.2);
}
</script>
</head>
<body>
<div id="layerpopup">
<div class="mask"></div>
<div class="window">
확인 / <span class="close">x닫기</span>
</div>
<div class="uplink">시작하기</div>
</div>
</body>
</html>
'Java Script & DOM > jQuery' 카테고리의 다른 글
| jQuery의 Ajax지원 (0) | 2010.04.08 |
|---|---|
| jQuery로 CSS 다루기 (0) | 2010.04.08 |
| jQuery로 HTML 문서 수정하기 (0) | 2010.04.07 |
| jQuery 이벤트와 효과 (0) | 2010.04.07 |
| jQuery 액션(함수) (0) | 2010.04.07 |