오늘 하루 보지 않기 팝업 구현하기

쿠키를 사용해서 오늘 하루 보지 않기 팝업을 구현해 보겠습니다.

쿠키란?

이미지출처:https://raonctf.com/essential/study/web/cookie_connection

브라우저 쿠키는 웹 브라우저에서 사용되는 작은 데이터 조각입니다. 이 데이터는 웹사이트와 브라우저 간에 주고받을 수 있으며, 주로 사용자 경험을 개선하고 웹사이트에서 사용자를 식별하고 추적하는 데 사용됩니다.

서울시청 홈페이지 팝업구현

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div class="top-banner">
                <a href="">
                    <img src="./assets/images/top_banner.jpg" alt="2023년 9월3일 ~ 11월 12일 차 없는 잠수교 뚜벅뚜벅 축제" />
                </a>
                <div class="today-del-area">
                    <input type="checkbox" name="" id="today-del-checkbox" />
                    <label for="today-del-checkbox" class="today-del-text">오늘 하루 보지 않기</label>
                    <button class="btn-close">
                        <span class="blind">닫기</span>
                    </button>
                </div>
            </div>

CSS

.top-banner{
    position: relative;
    width: 100%;
    height: 91px;
    border-bottom: 1px solid #dbdbdb;
    display: none;
}
.top-banner a{
    display: block;
    width: 100%;
    height: 100%;
}
.top-banner a img{
    height: 100%;
    object-fit:cover;
}
.top-banner .today-del-area{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2px;
    right: 50%;
    bottom: 5px;
    width: 150px;
    margin-right: -576px;
    padding: 3px 2px 5px;
    background: rgba(0,0,0,0.5);
    border-radius: 6px;
}
.top-banner .today-del-area input{
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    opacity: 0;
}
.top-banner .today-del-area label{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #fff;
}
.top-banner .today-del-area input + label::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #fff;
    margin: 1px 4px 0 2px;   
}
.top-banner .today-del-area input:checked + label::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #fff url(./../images/icon_input_checked_m.png) no-repeat 50% 50%;
    background-size: 10px auto;
    margin: 1px 4px 0 2px;   
}
.top-banner .today-del-area .btn-close{
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(./../images/btn_allmenu_close.png) no-repeat center center;
    background-size: 50% auto;
}

Javascipt

$(function(){
	$layerPopup = document.querySelector('.top-banner');
    $btnLayerPopupClose = document.querySelector('.top-banner .btn-close');
    $btnLayerPopupTodayHide = document.getElementById('today-del-checkbox');


    if(!$.cookie('testCookie')){
        layerPopupShow();
    }

    $btnLayerPopupClose.addEventListener('click',function(){
        
     
        if($btnLayerPopupTodayHide.checked){
            layerPopupHide(1);
        }else{
            layerPopupHide(0);
        }
    })

    function layerPopupShow(){
        $layerPopup.style.display = 'block';
    }

    function layerPopupHide(state){
        $layerPopup.style.display = 'none'

        if(state === 1){
            if($.cookie('testCookie') == undefined){
                $.cookie('testCookie', 'Y', { expires: 1, path: '/' });
            }
        }
    }

})

jquery 쿠키 플러그인을 cdn을 사용하여 넣어주었습니다.
jquery 소스는 testCookie가(쿠키) 생성되어 있지 않으면 layerPopupShow가 동작하여 layerPopupdms display blockd이 되어 보이게 되고 .top-banner .btn-close를 클릭할 때마다 today-del-checkbox가 체크되어있는지 확인하고 체크되어있다면 layerPopupHide(1)을 실행하여 쿠키를 생성하고 아니라면 그대로 팝업을 닫아줍니다.