Шпаргалка для WEB мастера: Уведомление о COOKIES - скрипт

Простой скрипт с уведомлением. Сделано на простом Js, не нужно подключать никаких библиотек. По умолчанию скрыт на мобильных чз CSS.

Вот это вставлять в HTML

<!-- START Cookie-Alert --> <div id="cookie_note"> <p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности, сборе персональных данных и об использовании файлов cookie, <a href="/policy.html" target="_blank">нажмите здесь</a>.</p> <button class="button cookie_accept btn btn-primary btn-sm">Я согласен</button> </div> <script> function setCookie(name, value, days) { let expires = ""; if (days) { let date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } function getCookie(name) { let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; } function checkCookies() { let cookieNote = document.getElementById('cookie_note'); let cookieBtnAccept = cookieNote.querySelector('.cookie_accept'); // Если куки cookies_policy нет или она просрочена, то показываем уведомление if (!getCookie('cookies_policy')) { cookieNote.classList.add('show'); } // При клике на кнопку устанавливаем куку cookies_policy на один год cookieBtnAccept.addEventListener('click', function () { setCookie('cookies_policy', 'true', 365); cookieNote.classList.remove('show'); }); } checkCookies(); </script> <!-- END Cookie-Alert -->

Вот это в CSS

#cookie_note{ display: none;position: fixed;z-index:100; bottom: 15px;left: 50%; max-width: 90%;transform: translateX(-50%); padding: 20px;background-color: white; border-radius: 4px;box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4); } #cookie_note p{margin: 0;font-size: 0.7rem;text-align: left;color: black;} #cookie_note .btn-sm {display: block;margin: 0 auto;} .cookie_accept{width:20%;} @media (min-width: 576px){#cookie_note.show{display: flex;}} @media (max-width: 575px){#cookie_note.show{display: none;text-align: left;}}

Оригинал: https://tretyakov.net/post/preduprezhdenie-o-cookie-dlya-sajta-na-javascript/

Демо:

Под номером 2
Под номером 2

Больше материалов а моем Телеграме :

11
Начать дискуссию