라이브러리 브랜드

Korean English Japanese

[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();
            }
        }

    }
}();
반응형
댓글 0
  • 라이브러리 브랜드에 새로운 의견을 남겨주세요.