[JavaScript] 팝업 창 오늘 그만 보기

오늘 그만 보기 팝업창 구현하기

오늘의 쿠키를 읽고 페이지 재방문 시에 팝업창을 다시 열지 않게 하는 버튼을 작동하게 하는 자바스크립트 소스입니다. 해당 부분에 HTML을 작성하고 별도의 CSS를 설정한 후, 자바스크립트로 팝업창을 연동할 수 있습니다.

HTML

<div class="top-pop-wrap">
    <div class="top-pop-box">
        <div>
            팝업 이미지 또는 내용(컨텐츠)
        </div>
        /* 닫기버튼*/
        <a href="#a" title="닫기" class="btn-pop-close">
        <span class="hide">닫기</span>
        </a>
        <p class="do-not-open-box">
            <input type="checkbox" id="do-not-open" />    
            <label for="do-not-open" title="오늘 그만 보기"></label>
        </p>
    </div>
</div>

JavaScript

//======================================================================
//자바스크립트 팝업 버튼 작동
//======================================================================
App.TopPop.init();

var App = new Object();

App.TopPop = function () {
    var self;
    return {
        init: function () {
            self = this;

            // popup close
            $('.btn-pop-close').on('click', function() {
                if($('#do-not-open').is(':checked')) {
                    self.setCookie('todayCookie', 'done', 1);
                }
                $('.top-pop-wrap').slideUp();
            });

            // Do not open today.
            self.getCookie();
        },
        setCookie: function(name, value, expiredays) {
            var todayDate = new Date();
            todayDate.setDate(todayDate.getDate() + expiredays);
            document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';'
        },
        getCookie: function() {
            var cookiedata = document.cookie;
            if (cookiedata.indexOf('todayCookie=done') < 0 ){
                $('.top-pop-wrap').show();
            } else {
                $('.top-pop-wrap').hide();
            }
        }

    }
}();