Search Results for 'div'

1 POSTS

  1. 2012.06.01 jQuery 를 이용해서 div 팝업창 위치 조정하여 뛰우기 4

언제부턴가 팝업창이 윈도우 팝업이 아닌 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한다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

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 가 속도에 영향을 미치는지에 대한 부분은 ...???