Достали из нашей базы в ЛК, отряхнули от спана Espo и выкатили сюда. Код — чёрные блоки, как любим.
Тело уведомления:
<div id="cookie_note">
<p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании файлов cookie, <a href="" target="_blank">нажмите здесь</a>.</p>
<button>Я согласен</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>
CSS:
| <style> |
| #cookie_note{ |
| display: none; |
| gap: 5px; |
| align-items: center; |
| justify-content: center; |
| position: fixed; |
| max-width:900px; |
| z-index: 10; |
| bottom: 15px; |
| left: 50%; |
| width: 90%; |
| transform: translateX(-50%); |
| padding: 10px; |
| background-color: white; |
| border-radius: 4px; |
| box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4); |
| } |
| #cookie_note.show { display: flex; } |
| #cookie_note>button { |
| width: 270px; |
| font-size: 10px; |
| line-height: 25px; |
| color: white; |
| background: black; |
| padding: 5px; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| box-shadow: none; |
| } |
| #cookie_note>button:hover { |
| background-color: #FF3D00; |
| } |
| #cookie_note p{ |
| margin: 0; |
| font-size: 0.7rem; |
| line-height:1.2; |
| text-align: left; |
| color: black; |
| } |
| @media (max-width: 991px) { |
| #cookie_note{ flex-direction:column; } |
| } |
| </style> |
Комментарии
Комментарии (0)