화면을 덮는 팝업창 + 쿠키 만들기

화면을 덮고 있는 팝업 창입니다.

오늘 하루 열지 않기에 체크를 하자 쿠키가 생깁니다.

    <div class="popup">
        <div class="pop_case">
            <div class="pop_con">
                <img src="./assets/main_news02.jpg" alt="">
            </div>
            <div class="pop_close row">
                <input type="checkbox">
                <span>오늘 하루 열지 않기</span>
                <button>CLOSE</button>
            </div>
        </div>
    </div>

 

우선 팝업창이 화면 전체를 덮도록 합니다.

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(0, 0, 0, 0.25);
    z-index: 9999;
}

 

팝업창에 cookie를 만들어 주고, cookie가 없다면 나타나도록 합니다.

    var getCookie = $.cookie('popup');

    if (!getCookie) {
        $('.popup').show();
    }

 

만료 시간을 정해주면 됩니다. { expires: 1 }로 설정하면 1일동안 보여주지 않기 입니다.

input(체크박스)에다가 change 이벤트를 주고, 체크박스를 표시하게 되면 1일동안 쿠키를 주면서, 팝업창을 보이지않게 합니다.
    $('.popup input').on('change', function () {
        $.cookie('popup', 'value', { expires: 1 });
        $('.popup').hide();
    });

 

팝업창의 CLOSE 버튼을 클릭하면 보이지 않도록 합니다.

    $('.popup button').on('click', function () {
        $('.popup').hide();
    });

 

팝업창의 휠 이벤트를 막습니다.

    $('.popup').on('wheel', function (e) {
        e.preventDefault();
    });