Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>В этой статье мы поэтапно сверстаем информационную плашку об использовании cookie.</strong></p>

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

3 <p>Выглядит он примерно так:</p>

4 <p>Давайте заверстаем нечто подобное =)</p>

5 <h2>Содержание</h2>

6 <ul><li><a>HTML</a></li>

7 <li><a>Основной CSS</a></li>

8 <li><a>JavaScript</a></li>

9 </ul><h2>HTML</h2>

10 <p>Наш баннер будет состоять из текста, кнопки подтверждения и ссылки на поясняющий документ.</p>

11 <h2>Основной CSS</h2>

12 <p>Позиционируем плашку в нижний левый угол и растягиваем ее по ширине.</p>

13 <h2>JavaScript</h2>

14 <p>В нашем скрипте нам необходимо:</p>

15 <ul><li>Убедиться, что блок есть - иначе остановить работу</li>

16 <li>Найти блок и кнопку подтверждения</li>

17 <li>Навесить на кнопку "Слушатель"</li>

18 <li>При клике на кнопку удалить класс warning--active с блока, тем самым скрыв его</li>

19 <li>Сохранить куки, которые будут говорить нам о том, что пользователь нажал на кнопку.</li>

20 </ul><h3>Who</h3>

21 <p>Если блока на странице нет - функция вернет false:</p>

22 <p><em>На самом деле вернет undefined, но он преобразуется в false</em></p>

23 <h3>findElements()</h3>

24 <p>Находим сам блок и кнопку внутри:</p>

25 <h3>subscribe()</h3>

26 <p>Добавляем кнопке обработчик события "клик":</p>

27 <h3>onClick()</h3>

28 <h3>hideContainer()</h3>

29 <p>В разделе основной css можно увидеть, что у класса warning задано свойство display: none;, а у warning--active - display: flex;</p>

30 <p>Удалив warning--active, мы скрываем блок.</p>

31 <h3>setCookie()</h3>

32 <p>Установим куки, которые будут говорить нам о том, что пользователь принял согласие на использование кук.</p>

33 <p><em>2592000 - количество секунд в месяце</em></p>

34 <p>После установки куки предполагается, что блок больше не будет появляться на странице.</p>

35 <p>Этого можно достичь двумя способами</p>

36 <h3>Через бэк</h3>

37 <p>Просим бэкенд или самостоятельно (если вы и есть бэк) не выводить блок, если заданные вами куки есть у пользователя.</p>

38 <p>Автор статьи предпочитает способ через бэк =)</p>

39 <h3>Через фронт</h3>

40 <p>Перепишем функцию who(), которая вместо проверки на наличие блока будет искать куки:</p>

41 <p><em>Реализацию функции getCookie можно посмотреть на learn.javascript.ru</em></p>

42 <p>Из HTML убираем класс warning--active</p>

43 <p>По умолчанию блок будет скрыт. Покажем его если скрипт не нашел куки:</p>

44 <p>Все остальное без изменений.</p>

45 <p>Полный скрипт:</p>

46 <p>Или на<a>codepen</a>.</p>

47 <p><em>Полный скрипт можно сократить до 8 строк</em></p>