언제부턴가 팝업창이 윈도우 팝업이 아닌 div 팝업이 대세가 되버렸다.
아마도 xp 팝업창 차단기능이 추가되면서부턴가 아닌가 싶다.
고객의 요청으로 사이트에 div 팝업을 띄워달라는 요청이 들어왔다.
창 크기에 상관없이 center를 기준으로 왼쪽 100px, top 은 90px 이다.
팝업창 기능이야 가장 일반적인것이다. 닫기 버튼과 하루동안 보이지 않기 체크박스
최근 가장 많이 쓰이고 있는(?) jQuery를 이용하여 위의 요구사항을 반영해보았다.
1. div 를 페이지 맨 하단에 추가한다.
<div style="position:absolute; width:474px;left:50%; margin-left:-208px; top:40px; z-index:3; display:none" id="layer_pop">
<table> 중략
</table>
<input type="checkbox" name="today_no" id="today_no" value="1">하루동안 보이지 않기
<a href="javascript:pop_close();">닫기</a>
</div>
처음은 일단 display:none 으로 추가한다.
2. javascript를 추가한다. jQuery용 최신 라이브러리를 import한다.
3. 닫기 버튼 클릭에 대한 구현.
function pop_close() {
$("#layer_pop").hide(); // 반대는 당연히 show();
}
4. onLoad시 hide되어 있는 div 를 show()로 변경하는 스크립트 추가
window.onload = function(){
$("#layer_pop").show();
}
5. cookie를 이용하여 "하루동안 보이지 않기" 기능 구현
먼저 getCookie, setCookie를 구현// 워낙 많이 사용한 코드들이므로 쉽게 검색해서 찾아올수 있다.
function getCookie( name ){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length ) {
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
function setCookie(name, value, expirehours, domain) {
var today = new Date();
today.setTime(today.getTime() + (60*60*1000*expirehours));
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
if (domain) {
document.cookie += "domain=" + domain + ";";
}
}
닫기 버튼 클릭시 체크박스에 체크가 되어 있는지 여부를 확인한다.
앞에서 구현한 pop_close 함수에 체크박스 확인하는 부분, 쿠키에 값을 넣는 부분을 추가한다.
function pop_close() {
if($("#today_no").attr("checked")){
setCookie("layer_pop", "done" , 24);
}
$("#layer_pop").hide();
}
6. 이제 마지막으로 onload시 쿠키를 읽어 div 를 show() 할것인가를 확인하면 된다.
window.onload = function(){
if(getCookie('layer_pop') != 'done'){
$("#layer_pop").show();
}
}
7. 끝? 아니다. div의 위치를 잡아주어야 한다. center를 기준으로 좌측100px 이다. 상단은90px
모니터의 해상도가 아닌 브라우저의 사이즈를 알아와야 한다.
var winwidth=document.all?document.body.clientWidth:window.innerWidth; // 브라우저 가로폭 사이즈 가져오기
// 브라우저 가운데에서 왼쪽으로 100px 이동- 보여지는 div의 가로폭의 1/2 만큼 추가로 빼야한다.
var left = winwidth/2 - (380/2 + 100);
//브라우저가 작을경우 팝업창이 잘리지 않게 하기 위해서 left 최소값은 팝업창 1/2 로 한다.
if(left < 190) left = 190;
var top = 90;
$("div#layer_pop").css({"left":left+"px"});
$("div#layer_pop").css({"top":top+"px"});
8. 구현된 완성코드를 보면 다음과 같다.
function pop_open(){
if(getCookie('layer_pop') != 'done'){
var winwidth=document.all?document.body.clientWidth:window.innerWidth;
var left = winwidth/2 - 320;// - (380/2 + 100);
if(left < 190) left = 190;
var top = 90;//windowHeight/2;
$("div#layer_pop").css({"left":left+"px"});
$("div#layer_pop").css({"top":top+"px"});
$("div#layer_pop").show("fast");
}
}
window.onload = pop_open;
window.onresize = pop_open;
마지막의 window.onresize는 창 키기가 변경될 경우 위치를 변경해 주기 위해서 적용하였다.
P.S ==> 플래시영역과 div 팝업이 겹치는 경우 플래시가 div 위로 올라와 버리는 경우가 발생한다.
이런경우 flash의 wmode가 transparent인 경우 z-index 값 많으로 적용이 되지 않는다.
반드시 Opaque로 바꿔주고 z-index를 변경해서 div 팝업이 맨 위로 올라오도록 해야한다.
<object ...
<param name='wmode' value='Opaque' />
<embed wmode='Opaque' ... />
</object>
이상 jQuery를 이용한 div 팝업 위치조정하기 편 끝.
마지막 resize 가 속도에 영향을 미치는지에 대한 부분은 ...???
