팝업창을 구현 해보자

쿠키를 이용해서 "24시간 띄우지 않기" 기능이 포함된 팝업창 코드 입니다.

var today = new Date();
let popup = document.querySelectorAll('[data-expired]');

for(var i = 0, size = popup.length; i < size; i++) {
    // 문자열을 공백, -, : 으로 나눠서 배열로 저장
    var d = popup[i].getAttribute('data-expired').split(/[\s,\-:]+/);
    var expired_date = new Date(d[0], d[1] - 1, d[2], d[3] || 24, d[4] || 0);

    if(today < expired_date) {
        todayOpen('agreePopup');
        // popup[i].style.display = 'block';
    } else {
        popup[i].parentElement.removeChild(popup[i]);
    }
}

// 창열기
function todayOpen(winName) {
    var blnCookie = getCookie(winName);
    var obj = eval("window." + winName);
    if (!blnCookie) {
        obj.style.display = "block";
    } else {
        obj.style.display = "none";
    }
}
// 창닫기
function todayClose(winName, expiredays) {
    setCookie(winName, "expire", expiredays);
    var obj = eval("window." + winName);
    obj.style.display = "none";
}
// 쿠키 가져오기
function getCookie(name) {
    var nameOfCookie = name + "=";
    var x = 0;
    while (x <= document.cookie.length) {
        var y = (x + nameOfCookie.length);
        if (document.cookie.substring(x, y) == nameOfCookie) {
        if ((endOfCookie = document.cookie.indexOf(";", y)) == -1)
          endOfCookie = document.cookie.length;
        return unescape(document.cookie.substring(y, endOfCookie));
    }
        x = document.cookie.indexOf(" ", x) + 1;
        if (x == 0)
            break;
    }
    return "";
}

// 24시간 기준 쿠키 설정하기, 만료 후 클릭한 시간까지 쿠키 설정
function setCookie(name, value, expiredays) {
    var todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
$('.popup').each(function() {
    let self = this;
    $(this).find('.popup-close .x-btn').on('click', function() {
        $(self).remove();
    })
});