[jQuery] DIV로 레이어 팝업창 만들기
첨부파일 : 
popup.zip
01. display를 사용한경우
main_display.php
|
<html>
<head>
<title>DIV로 레이어팝업창 만들기</title>
<style>
#main {
z-index:1;
}
#layer {
z-index:2;
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:rgba(0,0,0,0.8);
}
#popup {
z-index:3;
position:fixed;
text-align:center;
left:20%;
top:20%;
width:570px;
height:100px;
background-color:#FFFFFF;
border:3px solid #87cb42;
}
#close {
z-index:4;
float:right;
}
</style>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
function imagePopup(type) {
if(type == 'open') {
// 팝업창을 연다.
jQuery('#layer').attr('style','display:inline');
// 페이지를 가리기위한 레이어 영역의 높이를 페이지 전체의 높이와 같게 한다.
jQuery('#layer').height(jQuery(document).height());
}
else if(type == 'close') {
// 팝업창을 닫는다.
jQuery('#layer').attr('style','display:none');
}
}
</script>
</head>
<body>
<!-- 팝업창 열기 버튼 -->
<input type="button" href="javascript:" onClick="imagePopup('open')" value="팝업 오픈"/>
<div id="main">
<ul>
<img src="main.png"/>
</ul>
</div>
<div id="layer" style="display:none"> <!-- visibility:hidden 으로 설정하여 해당 div안의 모든것들을 가려둔다. -->
<div id="popup">
<!-- 팝업창 닫기 버튼 -->
<a href="javascript:" onClick="imagePopup('close')">
<img src="close.png" id="close"/>
</a>
<br/>
<font size="128" id="contents"><b>팝업창 오픈</b></font>
<div>
</div>
</body>
</html> |
출력결과(오픈 전) |
|
| 출력결과(오픈 후) |
|
02. visibilty.를 사용한경우
main_visibility.php
|
<html>
<head>
<title>DIV로 레이어팝업창 만들기</title>
<style>
#main {
z-index:1;
}
#layer {
z-index:2;
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:rgba(0,0,0,0.8);
}
#popup {
z-index:3;
position:fixed;
text-align:center;
left:20%;
top:20%;
width:570px;
height:100px;
background-color:#FFFFFF;
border:3px solid #87cb42;
}
#close {
z-index:4;
float:right;
}
</style>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
function imagePopup(type) {
if(type == 'open') {
// 팝업창을 연다.
jQuery('#layer').attr('style','visibility:visible');
// 페이지를 가리기위한 레이어 영역의 높이를 페이지 전체의 높이와 같게 한다.
jQuery('#layer').height(jQuery(document).height());
}
else if(type == 'close') {
// 팝업창을 닫는다.
jQuery('#layer').attr('style','visibility:hidden');
}
}
</script>
</head>
<body>
<!-- 팝업창 열기 버튼 -->
<input type="button" href="javascript:" onClick="imagePopup('open')" value="팝업 오픈"/>
<div id="main">
<ul>
<img src="main.png"/>
</ul>
</div>
<div id="layer" style="visibility:hidden"> <!-- visibility:hidden 으로 설정하여 해당 div안의 모든것들을 가려둔다. -->
<div id="popup">
<!-- 팝업창 닫기 버튼 -->
<a href="javascript:" onClick="imagePopup('close', '.layer01')">
<img src="close.png" id="close"/>
</a>
<br/>
<font size="128" id="contents"><b>팝업창 오픈</b></font>
<div>
</div>
</body>
</html>
|
출력결과(오픈 전)
|
|
| 출력결과(오픈 후) |
|
핵심01. z-index
보여질 레이어들의 순서를 지정한다.
핵심02 : jQuery(document).height()의 사용
전체 페이지의 높이값을 가지고 와서 해당 레이어가 페이지 전체를 감쌀 수 있게한다. 이렇게 하는 이유는 Style에서 가로 width:100% 는 적용이 잘 되지만 높이는 아래와 같이 잘 적용되지 않는다.
① jQuery(document).height()으로 높이값을 설정하지 않은 경우
※ 전체 페이지를 가리는 레이어가 필요하지 않는경우 이렇세 사용해도 되겠지만 이경우 #layer 자체가 필요치 않다.
② style에서 height:100% 로 지정한 경우
※ 페이지 전체가 가려지지 않는다. 전체적으로 가려야한다면 jQuery(document).height(); 를 사용하자.
핵심03 :
display:inline(나타내기), display:none(숨기기)
style의 display의 값을 inlin로 지정하면 화면에 나타나고 none으로 지정하면 나타나지 않는다. 처음에 보이게 하지 않을 창은 none으로 지정하여 사용하자.
visibility:visible(나타내기), visibility:hidden(숨기기)
style의 visibility의 값을 visible로 지정하면 화면에 나타나고 hidden으로 지정하면 나타나지 않는다. 처음에 보이게 하지 않을 창은 hidden으로 지정하여 사용하자.
