dsclub 하단 메시지형 안내 메시지 > 코딩 스토리

[code]<div id="infoMessage" style="display: block; position: fixed; bottom: 135px; right: 20px; border-radius: 12px; background-color: #f2f2f2; color: #3c3c3c; padding: 10px; z-index: 1000;">

    <button id="closeButton" style="position: absolute; right: 10px; top: 5px; text-align: right; background-color :#0000; color:#3c3c3c; border: none;">x</button>

    <p>아래의 버튼을 클릭하여 <br> 다른 채널의 게시물들을 볼 수 있습니다.</p>

</div>

<style>

    #infoMessage {

        position: relative;

    }

    #infoMessage::after {

        content: '';

        position: absolute;

        bottom: -19px; /* 삼각형을 아래쪽으로 이동 */

        right: 7px; /* 조정 가능 */

        border-width: 10px;

        border-style: solid;

        border-color: #f2f2f2 transparent transparent transparent; /* 삼각형 만들기 */

    }

</style>

<script>

document.addEventListener("DOMContentLoaded", function() {

    // 쿠키 체크

    if (getCookie("infoMessageClosed") === "true") {

        document.getElementById("infoMessage").style.display = "none";

    }

    // 버튼 클릭 시 메시지 숨기기 및 쿠키 설정

    document.getElementById("closeButton").addEventListener("click", function() {

        document.getElementById("infoMessage").style.display = "none";

        setCookie("infoMessageClosed", "true", 30); // 30일 동안 쿠키 저장

    });

});

// 쿠키 설정 함수

function setCookie(name, value, days) {

    const expires = new Date(Date.now() + days * 864e5).toUTCString();

    document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/';

}

// 쿠키 가져오기 함수

function getCookie(name) {

    return document.cookie.split('; ').reduce((r, c) => {

        const [key, value] = c.split('=');

        return key === name ? decodeURIComponent(value) : r;

    }, '');

}

</script>[/code]