Вы навярняка видели на разных сайтах всплывающий блок снизу.
Выглядит он примерно так:
Давайте заверстаем нечто подобное =)
HTML
<div class="warning warning--active">
<div class="warning__text">На этом веб-сайте используются cookie.</div>
<button class="warning__apply" type="button">OK</button>
<a class="warning__read" href="https://ru.wikipedia.org/wiki/Cookie">Читать полностью</a>
</div>
Наш баннер будет состоять из текста, кнопки подтверждения и ссылки на поясняющий документ.
Основной CSS
.warning {
position: fixed;
bottom: 0;
left: 0;
display: none;
width: 100%;
}
.warning--active {
display: flex;
}
Позиционируем плашку в нижний левый угол и растягиваем ее по ширине.
JavaScript
В нашем скрипте нам необходимо:
— Убедиться, что блок есть — иначе остановить работу;
— Найти блок и кнопку подтверждения;
— Навесить на кнопку «Слушатель»;
— При клике на кнопку удалить класс warning--active с блока, тем самым скрыв его;
— Сохранить куки, которые будут говорить нам о том, что пользователь нажал на кнопку.
let container;
let apply;
const init = () => {
if (!who()) {
// останавливаем работу скрипта
return;
}
findElements();
subscribe();
};
Who
Если блока на странице нет — функция вернет false:
const who = () => document.querySelector(".warning");
findElements()
Находим сам блок и кнопку внутри:
const findElements = () => {
container = document.querySelector(".warning");
apply = container.querySelector(".warning__apply");
};
subscribe()
Добавляем кнопке обработчик события «клик»:
const subscribe = () => {
apply.addEventListener("click", onClick);
};
onClick()
const onClick = (event) => {
// Отменяем поведение по умолчанию
event.preventDefault();
// Прячем блок
hideContainer();
// Устанавливаем куки
setCookie();
};
hideContainer()
const hideContainer = () => {
container.classList.remove("warning--active");
};
В разделе основной css можно увидеть, что у класса warning задано свойство display: none;, а у warning--active — display: flex;
Удалив warning--active, мы скрываем блок.
setCookie()
const setCookie = () => {
document.cookie = "warning=true; max-age=2592000; path=/";
};
Установим куки, которые будут говорить нам о том, что пользователь принял согласие на использование кук.
2592000 — количество секунд в месяце
После установки куки предполагается, что блок больше не будет появляться на странице.
Этого можно достичь двумя способами
Через бэк
Просим бэкенд или самостоятельно (если вы и есть бекенд) не выводить блок если заданные вами куки есть у пользователя.
Автор статьи предпочитает способ через бэк =)
Через фронт
Перепишем функцию who(), которая вместо проверки на наличие блока будет искать куки:
const who = () => {
// если куки есть - вернет true
return getCookie('warning');
};
Реализацию функции getCookie можно посмотреть на learn.javascript.ru
Из HTML убираем класс warning--active
<div class="warning warning--active">
По умолчанию блок будет скрыт. Покажем его если скрипт не нашел куки:
const showContainer = () => {
container.classList.add("warning--active");
};
const init = () => {
if (!who()) {
return;
}
findElements();
showContainer();
subscribe();
};
Все остальное без изменений.
Полный скрипт:
let container;
let apply;
const who = () => document.querySelector(".warning");
const findElements = () => {
container = document.querySelector(".warning");
apply = container.querySelector(".warning__apply");
};
const hideContainer = () => {
container.classList.remove("warning--active");
};
const setCookie = () => {
document.cookie = "warning=true; max-age=2592000; path=/";
};
const onClick = (event) => {
event.preventDefault();
hideContainer();
setCookie();
};
const subscribe = () => {
apply.addEventListener("click", onClick);
};
const init = () => {
if (!who()) {
return;
}
findElements();
subscribe();
};
init();
Или на codepen
Полный скрипт можно сократить до 8 строк
if (document.querySelector(".warning")) {
const container = document.querySelector(".warning");
const apply = container.querySelector(".warning__apply");
apply.addEventListener("click", () => {
container.classList.remove("warning--active");
document.cookie = "warning=true; max-age=2592000; path=/";
});
};
