원문 :http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
오늘날 웹사이트들은 점점 더 풍부하고 사용자들과 상호작용을 하는 것이 점점 더 모든 웹사이트에서 꼭 필요한 것이 되어가고 있다. 보통 중요한 정보를 보여주기 위해 윈도우 팝업창을 사용하는데 jQuery를 이용해서 멋지고 훌륭한 윈도우 팝업창을 만드는 방법에 대해서 배워보도록 하자. 읽어보고 이해가 되지 않는 부분이 있으면 알려주기 바란다. 영어가 별로 신통치 못해서 그럴수도 있을것이다.
여기서 튜토리얼이 잘 작동하는지 테스트해 볼 수 있다.
테스트 된 브라우저들: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome.
어떤것들이 필요한가?_What will We need?
멋진 팝업을 만들기 위해서 아래와 같은 것들이 필요하다.
- HTML
- CSS
- jQuery 라이브러리
- 배우고자 하는 열정
jQuery는 빠르고 안정적인 개발에 촛점을 맞춘 새로운 자바스크립트 라이브러리이다. 지난달에 "add magic"에 사용되기도 했다. 또한 http://www.plusdeporte.com 과 http://www.plusmusica.com 등 몇몇 사이트에서 AJAX 를 구현하기 위해 사용되었다.
jQuery 는 빠르고 간결한 자바스크립트 라이브러리이다. jQuery는 빠른 웹 개발을 위한 HTML 문서 추적, 이벤트 핸들링, 애니메이션과 AJAX 통신등을 쉽게 구현할 수 있도록 해준다.
1단계:무엇을 만들것인가?_Step 1: What We will do?
사진 한장이 백마디 말보다 가치가 있다... 암튼 아래와 같은 결과가 나오도록 하는 방법을 배우게 될것이다.
보는것처럼 간단한 웹 사이트를 하나 만들것이다. 버튼을 누르면 멋지고 부드러운 팝업창이 뜨게 될것이다. 자 시작해 보자!
2단계:간단한 웹 페이지 만들기_Step 2: Setting up our simple webpage
먼저 2개의 영역을 가지는 간단한 HTML 웹페이지가 필요하다. popup을 위한 popupContact 과 helps our popup 을 위한 backgroundPopup 이다.
- <!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
</head>
<body>
<center>
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
<div id="button"><input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
<br/><br/>
We can use it for popup-forms and more... just experiment!
<br/><br/>
Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
<br/><br/>
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
</p>
</div>
<div id="backgroundPopup"></div>
</body>
</html>
다음으로 CSS를 보도록 하자. HTML 에 스타일을 추가하고 무엇보다도 HTML 메인 영역을 숨기기 위한 스타일을 CSS에 추가해 줘야 한다. "popup core"와 일치하는 popupContact 와 backgroundPopup 그리고 팝업이 시작될때 보이지 않았으면 하는 부분들오 있다.
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
CSS 코드는 CSS를 리셋해주는 작은 CSS 조각을 추가하기 위해 매번 사용해 왔던 것이다. 이 코드는 모든 웹 사이트에서 레이아웃을 잡을때 많은 도움이 되었다. 암튼 모든 단계를 잘 따랐다면 아래와 같은 화면을 만나볼 수 있다.
3단계: jQuery를 이용해서 팝업에 마술 걸기_Step 3: Adding magic to our popup with jQuery
튜토리얼의 핵심 파일인 popup.js 파일에 팝업창을 멋지고 부드럽게 해주는 몇개의 함수를 추가해 주게 될 것이다. 하지만 먼저 팝업창의 상태를 제어하기 위해 popupStatus 변수를 설정해줘야 한다.
- //SETTING UP OUR POPUP
//0은 비활성화된 상태; 1은 활성화된 상태를 의미한다. / 0 means disabled; 1 means enabled;
var popupStatus = 0;
이제 팝업을 불러오기 위한 합수를 만들어보자.
- //loading popup with jQuery magic!
function loadPopup(){
//팝업은 popupStatus 가 비활성화되어 있을때만 불러진다. / loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
팝업을 닫거나 비활성화시키기 위한 함수
- //disabling popup with jQuery magic!
function disablePopup(){
//popupStatus 가 활성화 되어 있다면 비활성화 시키기 / disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
팝업창이 화면 중앙에 나타나게 하는 부분 추가
- //centering popup
function centerPopup(){
//화면 중앙에 자리잡게 하기 위한 요청 / request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//중앙에 위치시키기 / centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//IE6 을 위한 핵 / only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
그래서 만약 팝업창을 제어하기 위한 popupStatus 변수를 가지고 있다면 $(document).ready 함수 안에 jQuery 이벤트 제어를 사용해서 상호작용을 하기 위해 함수들이 필요하다.(loadPopup - 불러오기, disablePopup - 닫기/비활성화, centerPopup - 화면 가운데 위치시키기)
모든 코드는 아래 함수 안에 들어가야 한다는 것을 기억하자.
- $(document).ready(function(){
//following code will be here
});
아이디가 #button 인 버튼을 눌렀을때 팝업이 활성화 되도록 하고 싶다. 그래서
- //LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
간단하지 않은가? 그럼 계속해서 이벤트를 닫는 부분들 살펴보도록 하자. 모두 3가지 다른 방식으로 팝업이 닫히길 원한다. ESC 키를 누르거나, 팝업창에서 벗어나거나 X 버튼을 클릭하는 것이다. 그래서 아래와 같이 해줬다.
- //CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
4단계: jQuery를 이용한 멋지고 부드러운 팝업 테스트해보기_Step 4: Trying our stunning and smooth window popup in jQuery!
이제 다 끝났다. 이 튜토리얼이 도움이 되었으면 좋겠다. 여기서 실제 작동하는 예제를 볼 수 있고 모든 소스는 여기서 다운로드 할 수 있다. 그리고 여러개의 팝업창을 열기 위한 중요한 업데이트가 있다.
만약 버그나 잘못된 영어 표현을 발견했거나 질문이나 하고 싶은 말이 있는 경우 코멘트를 달아달라. 다음 시간에 또 보도록 하자.
이 글은 스프링노트에서 작성되었습니다.
좋은 강좌 감사합니다. 이러한 팝업을 여러군데 적용하고 싶을 경우 id 대신 class로 대체해 적용하면 되려나요?
답글삭제