html 팝업

<div id="popupContainer" class="popup-bg" style="display:none;">
    <div class="popup">
        <a href=""><img src="./img/pop.jpg" alt=""></a>
        <button class="btn-hide" onclick="hideFor24Hours()">24시간 동안 보지 않기</button>
        <button class="btn-close" onclick="closePopup()">닫기</button>
    </div>
</div>

 

.popup-bg {position: fixed;top: 100px; left: 0;  bottom: 0;z-index: 9999;}
.popup {background: white;text-align: center;max-width: 500px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); height: fit-content; width: 100%;}
.popup button {margin: 10px 5px;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}
.btn-close {background-color: #ccc;}
.btn-hide {background-color: #4CAF50;color: white;}
.popup a{width: 100%; display: block;}
.popup a img{width: 100%;}

 

<script>
    const popupKey = "hidePopupUntil";

    window.onload = function() {
        const hideUntil = localStorage.getItem(popupKey);
        const now = new Date();

        if (!hideUntil || now > new Date(hideUntil)) {
            document.getElementById("popupContainer").style.display = "flex";
        }
    };

    function closePopup() {
        document.getElementById("popupContainer").style.display = "none";
    }

    function hideFor24Hours() {
        const now = new Date();
        now.setHours(now.getHours() + 24);
        localStorage.setItem(popupKey, now.toISOString());
        closePopup();
    }
</script>