page.jpg

(적용 예시)

 

찾아봐도 없길래 만들었습니다.

 

동의 버튼을 누르면 쿠키에 설정이 저장되며,

사용자가 쿠키를 삭제하거나 30일이 지나기 전까지는 팝업이 뜨지 않습니다.

 

기본적으로 반응형이나, 내용에 따라 미디어 쿼리를 수정해야할수도 있습니다.

코드는 수정한 후 [관리자 페이지 → 설정 → 일반 → 하단 스크립트]에 넣으시면 됩니다.

 

쿠키는 30일 후 자동으로 삭제되도록 해놨습니다.

구글 크롬에서, equeer와 Gentelella 레이아웃에서 테스트 하였습니다.

 

PS: 맞는 게시판이 아닌것 같아 글 옮깁니다.

 

<style>
.fAccDiv {
    font-size: 12px;
    position: fixed;
    top: calc(100vh - 175px);
    display: none;
    width: 100%;
    height: 175px;
    padding-top: 24px;
    text-align: center;
    color: #F2F2F2;
    background-color: #161616;
}

@media only screen and (max-width: 549px) {
    .fAccDiv {
        top: calc(100vh - 175px);
        height: 175px;
        padding-top: 24px;
    }
}

@media only screen and (min-width: 550px) and (max-width: 719px) {
    .fAccDiv {
        top: calc(100vh - 125px);
        height: 125px;
        padding-top: 11px;
    }
}

@media only screen and (min-width: 720px) {
    .fAccDiv {
        top: calc(100vh - 78px);
        height: 78px;
        padding-top: 11px;
    }
}

.fAccDivOne, .fAccDivTwo {
    display: inline-block;
    margin: 8px;
}

.fAccLink {
    font-size: 12px;
    color: #F2F2F2 !important;
}

.fAccButton {
    font-weight: bold;
    width: 100px;
    padding: 5px;
    transition: all 0.1s ease-out;
    color: #161616;
    border: 2px solid #2AA3FF;
    border-radius: 4px;
    border-radius: 4px;
    outline: none;
    background: #2AA3FF;
}

.fAccButton:hover {
    color: #4F9BEC;
    border: 2px solid #4F9BEC;
    background: transparent;
}
</style>

<div class="fAccDiv" id="fAccDiv">
    <div class="fAccDivOne">
        <!-- 내용은 여기입니다. 수정하실 분은 수정하세요. 링크 타겟 바꾸는거 잊지 마세요. -->
        By continuing to browse the site, you are agreeing to our use of cookies and privacy notice.<br> To learn more about our privacy policy, you can <a class="fAccLink" href="/privacy_notice">click here</a>.
    </div>
    <div class="fAccDivTwo">
        <!-- 동의 버튼입니다. -->
        <button class="fAccButton" onclick="eatCookieNomNom()">I accept</button>
    </div>
</div>

<script type="text/javascript">
    function eatCookieNomNom() {
        var d = new Date();
        d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = "ateCookie=true;" + expires + ";path=/";
        document.getElementById("fAccDiv").style.display = "none";
    }
    if (getCookie("ateCookie") != "true") {
        document.getElementById("fAccDiv").style.display = "block";
    }
</script>