Всплывающее окно html cookies

Предупреждение о Cookie для сайта на JavaScript

Все чаще на иностранных и российских сайтах, при первом заходе, нас встречает уведомление об использовании на куки. Такое уведомление на сайты ставят чтобы соблюсти закон о «персональных данных». Европейский регламент GDPR однозначен: если ваш сайт рассчитан на аудиторию из стран Евросоюза, согласие пользователей со сбором куки обязательно. Из российского закона о персональных данных (№ 152-ФЗ) не понятно входят ли куки в эти самые «персональные данные».

В этом законе говориться, что ресурс должен представить посетителю политику сбора и обработки персональных данных (https://www.consultant.ru/document/cons_doc_LAW_61801/cbf4e15b7c330f9372e876cdf2bc928bad7950ef/), но при этом освобождается от этой обязанности, если ресурс уведомил посетителя об осуществлении обработки его персональных данных (Статья 18, пункт 4).

Для уведомление посетителя сайта о куках сделаем плашку внизу сайта, она будет появляться при первом заходе посетителя на сайт, если посетитель нажмет на кнопку «Я согласен», но сайт запомнит его на год и плашка больше показываться не будет. Все это сделаем на чистом JavaScript.

Создадим плашку об уведомлении о Cookie

Обычно для верстки я использую Bootstrap, поэтому кнопку в плашке использую оттуда. Вот CSS стили плашки:

#cookie_note < display: none; position: fixed; bottom: 15px; left: 50%; max-width: 90%; transform: translateX(-50%); padding: 20px; background-color: white; border-radius: 4px; box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4); >#cookie_note p < margin: 0; font-size: 0.7rem; text-align: left; color: black; >.cookie_accept < width:20%; >@media (min-width: 576px) < #cookie_note.show< display: flex; >> @media (max-width: 575px) < #cookie_note.show< display: block; text-align: left; >>

Вот HTML, добавим его ближе к концу body страницы:

 <div > <p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании файлов cookie, <a href="#" target="_blank">нажмите здесьa>.p> <button >Я согласенbutton> div>

JavaScript для предупреждения о cookie

Скрипт очень простой, в нем 3 функции для установки, получения и проверки куков, ниже код с комментариями:

В итоге, при первом заходе на сайт, наши посетители будут получать такое уведомление:

Источник

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

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

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

HTML

 class="warning warning--active">  class="warning__text">На этом веб-сайте используются cookie.  class="warning__apply" type="button">OK  class="warning__read" href="https://ru.wikipedia.org/wiki/Cookie" target="_blank">Читать полностью  

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

Основной 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"); 

На самом деле вернет undefined , но он преобразуется в false

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

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

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(); 

Полный скрипт можно сократить до 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=/"; >); >; 

Источник

Создание сообщения об использовании куки (cookie)

В данной теме рассмотрено создание внизу страницы небольшого модального окна с текстом об использовании сайтом файлов cookies и двумя кнопками: закрыть окно и перейти на политику конфиденциальности.

Уж не знаю зачем придумали это недоразумение, т.к. куки используются практически на всех сайтах. Это счетчики посещений, реклама, виджеты соц сетей или обратной связи. авторизация пользователей и т.д.

Нужно ли использовать такое предупреждение и на каких сайтах, я не знаю, в подробности не вдавался. Но можно почитать, например «Обязательно ли на данный момент наличие уведомлений об обработке файлов cookie на сайте интернет-магазина?» или «Как избежать штрафов за куки и политику конфиденциальности» (публикации не новые, может еще законов напридумывали) или поискать в интернетах.

Меня просили пару раз поставить такое окошко, поэтому и решил сделать такую заметку.

Если на сайте используется CMS WordPress, то можно воспользоваться плагином Cookie Notice for GDPR & CCPA (посмотреть скриншот его настроек) или дргуими.

Для самостоятельной установки используем коды ниже

HTML:

Можно расположить в любой части страницы

Этот сайт использует файлы cookies и сервисы сбора технических данных посетителей (данные об IP-адресе, местоположении и др.) для обеспечения работоспособности и улучшения качества обслуживания. Продолжая использовать наш сайт, вы автоматически соглашаетесь с использованием данных технологий.

CSS:

Стили кнопок взяты из темы: «Оформление кнопок на CSS». При желании можно выбрать другие или использовать свои.

Источник

Как добавить бесящую плашку про куки себе на сайт

Однажды мы уже рассказывали про куки — что это такое, как это работают и зачем сайты про них сообщают. Если на своём сайте вы тоже используете куки — держите простой способ подключить плашку на страницу:

Сразу оговоримся: в России вы не обязаны никого предупреждать об использовании кук; никто у вас этого не требует. Это чисто европейское требование, и если вам не особо интересны их переживания о приватности, можете никого ни о чём не предупреждать.

Но вы можете на такой же плашке предупредить человека о том, что скоро кончится лето и нужно поймать последние тёплые деньки; или что вот-вот нужно платить налоги; или что у вас распродажа чего-то хорошего. Так-то плашка хорошая, необязательно её использовать для кук.

И ещё: говорим по-русски

Мы угораем над словом cookie и считаем, что его следует склонять по правилам русского языка, в первом склонении, по аналогии со словом «рука».

Именительный падеж. У меня есть кука. У вас есть куки.

Родительный падеж. У меня нет ни одной куки. Вам не хватает пары кук.

Дательный падеж. Дам куке записаться. Дадим кукам записаться.

Винительный падеж. Вижу куку. Видим куки.

Творительный падеж. Этой кукой я подтверждаю… Этими куками мы подтверждаем.

Предложный падеж. Об этой куке написано… Об этих куках написано…

🤔 Что делаем: добавляем уведомление об использовании кук на странице.

🕔 Время: 5 минут.

✅ Понадобится: доступ к хостингу сайта. Вот статья про то, что такое хостинг, если вдруг пропустили.

👉 Коротко суть: мы добавим на страницу три элемента: блоки, которые будут отвечать за контент на плашке; стили оформления; скрипт, который её показывает и скрывает. Для этого используем код, который написал Вадим Филимонов.

Добавляем блоки на страницу

Общая логика плашки с уведомлением такая: мы добавляем блок с текстом, кнопкой и ссылкой. При нажатии на кнопку плашка исчезнет, а ссылка ведёт на объяснение, что такое куки.

Вся логика скрытия плашки описана в скрипте, поэтому пока просто добавляем плашку в самый конец страницы:

Подключаем стили

Стили — дело вкуса, их можно настроить так, чтобы плашка выглядела в цветах сайта; а можно наоборот, чтобы она сразу бросалась в глаза. Сделаем нейтральный вариант и добавим в стили описания наших новых блоков. Это можно сделать на странице в разделе или добавить в отдельный файл, если стили живут там.

Главное, что нам нужно от стилей, — расположение плашки внизу по центру страницы.

Ещё у нас в основном стиле есть display: none — он по умолчанию скрывает плашку. Чтобы она потом проявилась, ниже добавляется класс со стилем display: flex; когда нужно, мы применим новый класс к плашке, и она появится.

.warning < position: fixed; bottom: 0; left: 0; display: none; justify-content: center; width: 100%; padding: 30px; box-sizing: border-box; background-color: yellow; >.warning--active < display: flex; >.warning__text < margin-right: 30px; >.warning__read

Добавляем скрипт

Так как изначально мы делаем плашку для кук, очень хочется, чтобы она показалась один раз и больше не проявлялась. По иронии, лучший способ сделать это — использовать куки. Работать будет так:

1. Если в браузере уже есть кука о том, что человек уже видел предупреждение, — просто не показываем предупреждение
2. Если куки нет, то показываем предупреждение об использовании куки.
3. Когда человек скажет «Окей», пишем в браузер куку. Теперь при следующем заходе на страницу предупреждение не выведется.
4. Закрываем предупреждение

До основного скрипта нужно подключить библиотеку jQuery.

Посмотреть на работу плашки на главной странице учебного сайта. Если нажать ОК, то второй раз плашка уже не появится — всё как в жизни.

Что дальше

Дальше можно менять здесь текст, дизайн, настраивать время жизни куки. А можно просто не страдать этой ерундой и выводить предупреждение о чём-то хорошем, приятном и жизнеутверждающем.

У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Источник