(적용 예시)
찾아봐도 없길래 만들었습니다.
동의 버튼을 누르면 쿠키에 설정이 저장되며,
사용자가 쿠키를 삭제하거나 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>