Баннер кук⁠⁠

Вы навярняка видели на разных сайтах всплывающий блок снизу.

Выглядит он примерно так:

Давайте заверстаем нечто подобное =)

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=/";
 });
};