JavaScript 쿠키를 이용한 레이어팝업 예제

<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>레이어팝업</title>
<style>
	body,div {margin:0;padding:0}
	img{vertical-align:top; border:0;}
	a,a:hover{text-decoration:none;}

	/*레이어팝업*/
	#div_laypopup1{
		display:none;
		position:absolute;
		width:425px; height:510px;
		left:700px; top:94px;
		color:white;
		text-align:center;
		z-index:5;
	}
	.todayClose{
		position:absolute; right:6px; bottom:5px;
		margin:0; padding:0;
		color:#fff;
	}
	.todayClose input{vertical-align:middle;}
	.justClose{
		display:inline-block;
		font-family:"Malgun Gothic";
		color:#000;
		cursor:pointer;
		line-height: 1.2em;
		border:1px solid #ccc;
		padding:0px 2px 1px 2px;
		margin-left:3px;
		background-color:#FFF;
	}
</style>
</head>

<body>
<div id="div_laypopup1" name='div_laypopup1'>  
    <img src="http://placehold.it/425x510">
        <p class='todayClose'>
            <label for="pop2close"><input id='pop2close' type="checkbox" value="OK" onclick="closeWin('div_laypopup1', 1);"/>&nbsp; 하루동안 이 창을 열지 않음</label>
            <span class='justClose' onclick="closeWin('div_laypopup1',0)">닫기</span>
        </p>
</div>

<script type="text/javascript">
//팝업띄우기
    function openWin(winName){  
       var blnCookie    = getCookie( winName );  
       var obj = eval( "window." + winName );  
       if( !blnCookie ) {  
           obj.style.display = "block";  
       };
    };
// 쿠키 가져오기  
    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 "";  
    };
  //24시간 쿠키 설정하기  
        openWin('div_laypopup1');  
    function setCookie( name, value, expiredays ) {   
       var todayDate = new Date();   
       todayDate.setDate( todayDate.getDate() + expiredays );   
       document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
    };         
    // 창닫기  
    function closeWin(winName, expiredays) {   
      setCookie( winName, "done" , expiredays);   
      var obj = eval( "window." + winName );  
            obj.style.display = "none";  
    }

</script>
</body>
</html>

예제링크

관련 글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다