Как сверстать классный баннер об использовании cookie

В этой статье мы поэтапно сверстаем информационную плашку об использовании cookie.
Вы наверняка видели на разных сайтах всплывающий блок снизу.
Выглядит он примерно так:
Давайте заверстаем нечто подобное =)
Содержание
HTML
Наш баннер будет состоять из текста, кнопки подтверждения и ссылки на поясняющий документ.
Основной CSS
Позиционируем плашку в нижний левый угол и растягиваем ее по ширине.
JavaScript
В нашем скрипте нам необходимо:
- Убедиться, что блок есть — иначе остановить работу
- Найти блок и кнопку подтверждения
- Навесить на кнопку «Слушатель»
- При клике на кнопку удалить класс
warning--active
с блока, тем самым скрыв его - Сохранить куки, которые будут говорить нам о том, что пользователь нажал на кнопку.
Who
Если блока на странице нет — функция вернет false:
На самом деле вернет undefined
, но он преобразуется в false
findElements()
Находим сам блок и кнопку внутри:
subscribe()
Добавляем кнопке обработчик события «клик»:
onClick()
hideContainer()
В разделе основной css можно увидеть, что у класса warning
задано свойство display: none;
, а у warning--active
— display: flex;
Удалив warning--active
, мы скрываем блок.
setCookie()
Установим куки, которые будут говорить нам о том, что пользователь принял согласие на использование кук.
2592000 — количество секунд в месяце
После установки куки предполагается, что блок больше не будет появляться на странице.
Этого можно достичь двумя способами
Через бэк
Просим бэкенд или самостоятельно (если вы и есть бэк) не выводить блок, если заданные вами куки есть у пользователя.
Автор статьи предпочитает способ через бэк =)
Через фронт
Перепишем функцию who()
, которая вместо проверки на наличие блока будет искать куки:
Реализацию функции getCookie
можно посмотреть на learn.javascript.ru
Из HTML убираем класс warning--active
По умолчанию блок будет скрыт. Покажем его если скрипт не нашел куки:
Все остальное без изменений.
Полный скрипт:
Или на codepen.
Полный скрипт можно сократить до 8 строк
filimonov
4 года назад