jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정

⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정

안녕하세요 TriplexLab입니다 :)
오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie)

<!-- html -->
<div id="pop">
        <div class="cont">
            <p>레이어 팝업 입니다.</p> 
            <a href="#"><img class="thumb" src="./images/popup3.png" usemap="#pop" /></a>
        </div>
        <div class="close">
            <form method="post" action="" name="pop_form">
                <span id="check"><input type="checkbox" value="checkbox" name="chkbox" id="chkday"/><label for="chkday">오늘 하루동안 보지 않기</label></span>
                <span id="close">Close</span>
            </form>
        </div>
</div>

// js

<script>
    // 쿠키 가져오기
    var getCookie = function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
        }
        return "";
    }

    // 24시간 기준 쿠키 설정하기  
    var setCookie = function (cname, cvalue, exdays) {
        var todayDate = new Date();
        todayDate.setTime(todayDate.getTime() + (exdays*24*60*60*1000));    
        var expires = "expires=" + todayDate.toUTCString(); // UTC기준의 시간에 exdays인자로 받은 값에 의해서 cookie가 설정 됩니다.
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    var couponClose = function(){
        if($("input[name='chkbox']").is(":checked") == true){
            setCookie("close","Y",1);   //기간( ex. 1은 하루, 7은 일주일)
        }
        $("#pop").hide();
    }
    
    $(document).ready(function(){
        var cookiedata = document.cookie;
        if(cookiedata.indexOf("close=Y")<0){
            $("#pop").show();
        }else{
            $("#pop").hide();
        }
        $("#close").click(function(){
            couponClose();
        });
    });
</script>

👏 결과 확인

jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 결과

퍼블리셔나, 프론트단에서 일하다보면 너무나도 흔하게 자주 쓰는 거라서 이번에 정리 한번 했습니다.

위에 코드 파일로 공유드립니다. :)
다운받아서 test해보세요~

jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정.zip

0.00MB

JavaScript으로도 다시 구현 해놨습니다.(21/10/20 추가) 👇👇

JavaScript 레이어 팝업 오늘 하루 그만 보기 쿠키설정.zip

0.00MB

🎯 popup 끝나는 날짜 설정하여 자동으로 내리기

(21/11/12 추가) 새로 추가한 기능 👇👇

function now () { // 현재 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
    const popDt = new Date(),
    popYear = popDt.getFullYear(),
    popMonth = popDt.getMonth() + 1,
    popDate = popDt.getDate(),
    popHours = popDt.getHours(),
    popMin = popDt.getMinutes(),
    popSecond = popDt.getSeconds();
    return popYear+'-'+(popMonth<10?'0'+popMonth:popMonth)+'-'+(popDate<10?'0'+popDate:popDate)+'-'+popHours+'-'+popMin+'-'+popSecond;
};

function endDate() {  // 끝나는 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
    const endYear = "2021",
    endMonth = "11",
    endDate = "12", 
    endHours = "11",
    endMin = "33",
    endSecond = "00";
    return endYear+'-'+(endMonth<10?'0'+endMonth:endMonth)+'-'+(endDate<10?'0'+endDate:endDate)+'-'+endHours+'-'+endMin+'-'+endSecond;
};

function dayNone() { // 현재 날짜와, 끝나는 날짜 서로 비교하여 pop을 숨기는 기능
    if(now() > endDate()){ 
        pop.style.display = 'none';
    }
};

JavaScript 레이어 팝업 오늘 하루 그만 보기 쿠키설정.zip

0.00MB

 

해당 내용 자세히 보고싶은 분들은 아래 POST참고 해주세요! :)

popup 끝나는 날짜 설정하여 자동으로 내리기