레이어 팝업

HTML

<div id="layer_greetings">

<div>

<img src="/images/common/popup/greetings_201609.jpg" alt="한가위 인사말" />

</div>

<div style="background-color:#bebebe;height:34px;line-height:34px;padding-right:17px;text-align:right;">

<input type="checkbox" name="greetings" id="greetings_201609" ><label for="greetings_201609"><span style="color:#000;margin-left:3px;margin-right:17px;font-size:14px;">오늘 하루 이 창을 열지 않음</span></label> <a href="javascript:closeGreetings()" title="창닫기"><img src="/images/common/popup/greetings_close.jpg" style="vertical-align:middle"/></a>

</div>

</div>

CSS

<style>

/* #layer_greetings { width:570px; height:800px; position:absolute;z-index:1000;top:20px;left:367px;display:none; } */

#layer_greetings { width:570px; height:800px; position:absolute;z-index:1000;display:none;overflow:hidden;    margin: 0 auto; }

.close div{float:left; text-align:right;}

#check{font-size:12px; font-family:'돋움'; position:absolute; bottom:9px; right:45px; }

#close{font-size:12px; position:absolute; bottom:9px; right:10px; }

#close a { color:#fff; }

</style>

SCRIPT

<script type="text/javascript">

$(document).ready(function(){

if( $('#greetings_201609').is(":hidden")) {

var cookie_greetings = getCookieGreetings('greetings_201609');

if(cookie_greetings =='done'){

}else {

$("#layer_greetings").slideDown(2000);

}

}

//alert($('.main-visual').find('img').offset().left);

//레이어 상단위치는 html을 적당한데 위치시키니까 잡혔는데

//left 위치는 반응형 웹이라 가변적으로 하다 보니 left 위치는 스크립트도 처리한다.

$('#layer_greetings').css({'left':$('.main-visual').find('img').offset().left});

$( window ).resize(function() {

$('#layer_greetings').css({'left':$('.main-visual').find('img').offset().left});

});

});

function closeGreetings(){

if( $("#greetings_201609").prop("checked") ==true) {

setCookie("greetings_201609", 'done' , 1); 

}else {

}

$('#layer_greetings').css({"display":"none"});

}

function getCookieGreetings(c_name) {

var i,x,y,ARRcookies=document.cookie.split(";");

for (i=0;i<ARRcookies.length;i++)

{

 x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));

 y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);

 x=x.replace(/^\s+|\s+$/g,"");

 if (x==c_name)

{

return unescape(y);

}

 }

}

</script>

여담.

팝업없는 사이트 --> 상단 인라인 팝업 --> 레이어 팝업

음......