팁/튜토리얼

배너 24시간 쿠키 자바스크립트 제어하기

2019.01.17 16:20
1,595
1
0

오늘하루열지않음, 배너 24시간 쿠키 이런 글로 검색하면 나오는 팁입니다.

 

// 쿠키 굽기
function setCookie( name, value, expiredays ) {
   var todayDate = new Date();
   todayDate.setDate( todayDate.getDate() + expiredays );
   document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

 

// 체크 여부

if($("#chkday").is(':checked')){
   setCookie( "topPop", "done" , 1 );
   //alert("쿠키를 생성하였습니다.");
}

 

//저장된 해당 쿠키가 있으면 창을 안 띄운다 없으면 뛰운다.
cookiedata = document.cookie;
if ( cookiedata.indexOf("topPop=done") < 0 ){
   $(".bn_top").show();
   $("header").addClass('bn');
}
else {
   $(".bn_top").hide();
   $("header").removeClass('bn');
}

 


전체 샘플은 아래와 같습니다.

 

<style>
   .bn_top{
      position:relative;
      width:100%;
      height:100px;
      background:#005A92 url('{$tpl_path}/gwin/bn_top.png') no-repeat center center;
   }
   .container{width:1140px;margin:0 auto;}
   header.bn{
      top:100px !important;
   }
   .bn_top_close_wrap{float:right;top:70px;position:relative;color:#fff;font-size:11px;}
   .bn_top_close_wrap input{vertical-align:middle;margin:0;}
   .bn_top_close_wrap label{margin:0;}
   .bn_top_close{margin-left:10px;}
</style>
<script>
   // 쿠키
   function setCookie( name, value, expiredays ) {
      var todayDate = new Date();
      todayDate.setDate( todayDate.getDate() + expiredays );
      document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
   }

   // setCookie( "topPop", "done" , null );
   jQuery(function($){
      $("header").addClass('bn');
      $(".bn_top_close").on("click",function(){
         if($("#chkday").is(':checked')){
            setCookie( "topPop", "done" , 1 );
            //alert("쿠키를 생성하였습니다.");
         }
         $(".bn_top").hide();
         $("header").removeClass('bn');
      });

      //저장된 해당 쿠키가 있으면 창을 안 띄운다 없으면 뛰운다.
      cookiedata = document.cookie;
      if ( cookiedata.indexOf("topPop=done") < 0 ){
         $(".bn_top").show();
         $("header").addClass('bn');
      }
      else {
         $(".bn_top").hide();
         $("header").removeClass('bn');
      }
   })

   
   
</script>
<div class="bn_top">
   <div class="container">
      <div class="bn_top_close_wrap">
         <input type="checkbox" id="chkday"> <label for="chkday">1일간 열지 않음</label><img src="/gwin/bn_top_close.png" alt="닫기" class="bn_top_close">
      </div>
      
   </div>
</div>

 

ps. 깔끔하게 정리해서 올려야 되는데 그러지 못한 점 양해 부탁드려요 ㅠ

eond Lv. 12

댓글 0