[javascript] js.cookie를 이용한 오늘 하루 열지 않기 팝업 구현하기

들어가며:

  모든 사이트에 하나씩은 있는 팝업을 구현하는 방법에 대해서 설명을 하려고 합니다. 팝업을 열어주는 방법은 매우 간단하게 구현이 가능하지만, 오늘 하루 열지 않기, 하루 동안 열지 않기를 구현하기 위해서는 쿠키(cookie)를 사용해야 합니다. 쿠키는 간단하게 말하면, 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 말합니다. 사용자의 접속을 기록으로 남길 수 있고, 사용자가 방문한 시간으로부터 30초, 10분 등 다양하게 쿠키를 저장하고, 만료(expire)를 시킬 수 있습니다. 만료를 시킨다는 내용은 그 시간 이후에 이 쿠키파일을 없애겠다 라는 말입니다. 여기까지 이해를 하셨으면, 하루동안 열지 않기, 오늘 하루 열지 않기를 어떻게 구현을 해야할지 감이 오실겁니다. 아래 소스 코드를 통해서 구현하는 방법에 대해서 설명하겠습니다.

 

사용 패키지:

  js.cookie의 라이브러리를 사용해서 구현을 할 생각입니다. javascript의 장점중에 하나가 무자비하게 많은 플러그인이 있어서 바로 가져다가 쓰면, 굳이 내가 구현을 하지 않아도 쉽게 구현이 가능합니다. [다운로드 받기]

 

소스코드:

home.ejs

  home.ejs에서는 cookie의 내용이 있는지 없는지 확인을 한 뒤에 팝업창을 띄워주는 역할을 합니다.

if (Cookies.get("popup=") == undefined) {
  open("/home_popup", "", "width=400, height=500, menubar=no, status=no, toolbar=no");
}

 

popup.ejs

  popup.ejs에서는 팝업 내용을 구현하시면 됩니다. 여기서 주의해야할 점은 <div id="popup" style="display:none"> 입니다. display의 option은 none과 block이 있는데 none은 화면에서 안보이게 하고, block은 화면에 보여줄때 사용합니다.

<% layout('../layout/popup') %>
<% script('/javascripts/app/popup.js') %>

<div class="container">
    <div id="popup" align="center" style="display:none">
        <h1>시원하게 맥주한잔 하실래요</h1>
        <img src='https://t1.daumcdn.net/cfile/tistory/2274643F581D701F1B'>
        <input class= 'close-button' type="checkbox" name="close" value="OK"/>하루동안 이 창을 열지 않음
    </div>
</div>

 

popup.js

  popup.js는 핵심적인 역할을 합니다. setCookie(), setCookieAt00()은 하루동안 열지 않기, 오늘 하루 열지 않기를 각각 구현한 내용입니다. 사용하고 싶은 부분의 주석을 하고 사용하면 됩니다. openWindow()와 closeWindow()는 팝업 즉 popup.ejs를 열고 닫는 역할을 하는 함수입니다. display의 옵션인 none과 block을 사용합니다.  

/**
 * 
 * Created by solidpple on 11/7/16.
 */
requirejs([ "common"], function () {
    requirejs([ "loglevel", "js.cookie" ], function (log, Cookies) {
        'use strict';

        var openWindow = function (cookieName) {
            var cookie= getCookie(cookieName);
            var popup = $("div#popup");
             if (cookie == undefined) {
                 popup.css("display", "block");
             } 
        };

        var closeWindow = function (cookieName) {
            setCookie(cookieName, 1); // 하루동안
            // setCookieAt00(cookieName, 1); // 오늘만
            var popup = $("div#popup");
            popup.css("display", "none");
            self.close();
        };

        var getCookie = function (cookieName) {
            return Cookies.get(cookieName);
        };

        var setCookie = function (cookieName, expires) {
            // var inFifteenMinutes = new Date(new Date().getTime() + 1 * 60 * 1000);
            Cookies.set(cookieName, 'bar', {
                expires: expires // 하루
                // expires: (1 / 24 / 2 / 30 /2) // 30초
            });
        };
        
        var setCookieAt00 = function(cookieName, expires) {
            var todayDate = new Date();
            todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);
            if ( todayDate > new Date() ) expires -= 1;
            todayDate.setDate( todayDate.getDate() + expires);
            Cookies.set(cookieName, 'bar', {
                expires: todayDate.toGTMString()  
            });
        };


        var bindEvent = function() {
            var closeBtnRef = $("div#popup").find(".close-button");
            closeBtnRef.click(function() {
                closeWindow();
            });
        };

        var init = function () {
            bindEvent();
            openWindow('popup=');
        };
        init();
    });
});

 

출처 : ourcstory.tistory.com/192?category=664896