[html, jquery] 팝업 레이어-오늘 하루 그만보기, jquery-cookie (쿠키사용)

 

 

[오늘 하루 그만 보기] 간단히 구현하기

 

[jquery-cookie 플러그인 다운로드 및 사용법 참고] 

https://github.com/carhartl/jquery-cookie

 

 

* jquery-cookie 를 이용하지 않고 순수 JS 만으로 구현하는 것이 불필요한 유틸을 참조하지 않고 좋으나 여기서는 일단 편의성과 기존의 사이트에서 이용하고 있기 때문에 사용한다.

 

• html

<div id="floating-notice" style="display:none;position:absolute;border:0px #000 solid;background:#fff;top:20%;left:30%;padding:0px;margin-left:-250px;z-index:100;">
    <div style="font-size:20px;font-weight:bold;">
        <img src="/imgs/banner/floating_banner.jpg" />
    </div>

    <div style="text-align:left;margin:4px 0 1px 13px;float:left;">
        <input type="checkbox" name="floating_banner" id="floating_banner" /> <label for="floating_banner"> 오늘 하루 그만보기 </label>
    </div>
    <div style="text-align:right;margin:4px 4px 1px 3px;">
         <a href="javascript:closeBanner();">[닫기]</a>
    </div>
</div>

 

• script

<script type="text/javascript">

  // 페이지 로드시 쿠키 확인
  $(document).ready(function () {
    // 쿠키 체크
    var cook = $.cookie('notice');
    
    // 쿠키가 없으면 배너 노출
    if (cook == "ok") {
    	$("#floating-notice").hide();
    }
    else {
    	$("#floating-notice").show();
    }
  });

  // 닫기 버튼 클릭
  function closeBanner() {
    if ($("#floating_banner").is(":checked")) {
    	$.cookie('notice', 'ok', { expires: 1, path: '/' });
    }

    $("#floating-notice").hide();
  }
</script>

1. 팝업창이 display:none 상태에서 페이지 로드시 쿠키(notice)가 있는지 확인한다.

2. 쿠키가 없으면 팝업창을 노출 해주고 있으면 비노출한다.

3. 닫기 버튼 클릭시 "checkbox" 체크가 되어있으면 "notice" 쿠키 생성 후 팝업창을 닫는다.