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

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

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

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

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

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

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

HTML:

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

<div class="cookie_notice">
	Этот сайт использует файлы cookies и сервисы сбора технических данных посетителей (данные об IP-адресе, местоположении и др.) для обеспечения работоспособности и улучшения качества обслуживания. Продолжая использовать наш сайт, вы автоматически соглашаетесь с использованием данных технологий.
	<div>
		<a class="cookie_btn" id="cookie_close" href="#close">Согласиться</a>
		<a class="cookie_btn" href="#politika">Политика конфиденциальности</a>
	</div>
</div>

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

<div>

<a class="cookie_btn" id="cookie_close" href="#close">Согласиться</a>

<a class="cookie_btn" href="#politika">Политика конфиденциальности</a>

</div>

CSS:

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

.cookie_notice {
	display: none;
	position: fixed;
	z-index: 9999999;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 15px;
	font-family: Verdana, sans-serif;  
	color: #FFF;
	background: #337AB7;
	padding: 10px 20px; 
	border-top: 4px solid #BFE2FF;
}
/* Оформление кнопок */
.cookie_btn {
	display: inline-block;
	margin: 10px 6px 4px 6px;
	text-decoration: none;
	position: relative;
	font-size: 13px;
	padding: 4px 12px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	background: #337AB7;
	border: 2px solid #BFE2FF;
}
.cookie_btn:hover {
	color: #FFF;
}
.cookie_btn:after,
.cookie_btn:before {
	position: absolute;
	height: 2px;
	left: 50%;
	background: #FFF;
	bottom: -6px;
	content: "";
	transition: all 280ms ease-in-out;
	width: 0;
}
.cookie_btn:before {
	top: -6px;
}
.cookie_btn:hover:after,
.cookie_btn:hover:before {
	width: 100%;
	left: 0;
}

.cookie_notice {

display: none;

position: fixed;

z-index: 9999999;

bottom: 0;

left: 0;

right: 0;

text-align: center;

font-size: 15px;

font-family: Verdana, sans-serif;

color: #FFF;

background: #337AB7;

padding: 10px 20px;

border-top: 4px solid #BFE2FF;

}

/* Оформление кнопок */

.cookie_btn {

display: inline-block;

margin: 10px 6px 4px 6px;

text-decoration: none;

position: relative;

font-size: 13px;

padding: 4px 12px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

background: #337AB7;

border: 2px solid #BFE2FF;

}

.cookie_btn:hover {

color: #FFF;

}

.cookie_btn:after,

.cookie_btn:before {

position: absolute;

height: 2px;

left: 50%;

background: #FFF;

bottom: -6px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

.cookie_btn:before {

top: -6px;

}

.cookie_btn:hover:after,

.cookie_btn:hover:before {

width: 100%;

left: 0;

}

JS:

В примере на сайте не используются куки, и обновив страницу после закрытия окна, оно появится снова.

// функция возвращает cookie с именем name, если есть, если нет, то undefined	
function getCookie(name) {
	let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
	));
	return matches ? decodeURIComponent(matches[1]) : undefined;
}
let cookiecook = getCookie("cookiecook"),
cookiewin = document.getElementsByClassName('cookie_notice')[0];	
// проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ
if (cookiecook != "no") {
	// показываем	
	cookiewin.style.display="block"; 
	// закрываем по клику
	document.getElementById("cookie_close").addEventListener("click", function(){
		cookiewin.style.display="none";	
		// записываем cookie на 1 день, с которой мы не показываем окно
		let date = new Date;
		date.setDate(date.getDate() + 1);	
		document.cookie = "cookiecook=no; path=/; expires=" + date.toUTCString();	   		
	});
}

// функция возвращает cookie с именем name, если есть, если нет, то undefined

function getCookie(name) {

let matches = document.cookie.match(new RegExp(

"(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"

));

return matches ? decodeURIComponent(matches[1]) : undefined;

}

let cookiecook = getCookie("cookiecook"),

cookiewin = document.getElementsByClassName('cookie_notice')[0];

// проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ

if (cookiecook != "no") {

// показываем

cookiewin.style.display="block";

// закрываем по клику

document.getElementById("cookie_close").addEventListener("click", function(){

cookiewin.style.display="none";

// записываем cookie на 1 день, с которой мы не показываем окно

let date = new Date;

date.setDate(date.getDate() + 1);

document.cookie = "cookiecook=no; path=/; expires=" + date.toUTCString();

});

}

Согласиться Политика конфиденциальности

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 03.02.2020
Рубрики: Весь сайт, Модальные окна
Метки: JavaScript, Авторское
42184 просмотра

Смотрите также:

Новогоднее украшение для логотипа

Оформления логотипа сайта новогодним элементом на примере лого ВКонтакте

Модальные окна на CSS

Три варианта создания модальных окон без использования JavaScript

Блокировка вредоносных ботов

Список для блокировки IP-адресов вредоносных ботов через .htaccess

Добавить комментарий:

Ваш комментарий отправлен!

Александр: 30.06.2023 в 11:59

Добавляю на сайт, при наведении на кнопку ссылается на #close ссылку, но окно не уходит

Ответить
Ринат: 13.02.2023 в 11:59

Здравствуйте. Установил. Все замечательно. Но только одна проблемка - если нажать "Согласен", то перейдя на другую страницу, оно опять всплывает. Так не должно быть! Подскажите, пожалуйста, как это исправить..?

Ответить
- Alexander: 13.02.2023 в 13:10
  
  С куками что то, они должны записываться и окно не вылетать вторично.
  Как вариант заменить из на LocalStorage
  
  Ответить
  - Ринат: 13.02.2023 в 17:12
    
    Спасибо!
    
    //Как вариант заменить из на LocalStorage
    
    Из на что? Что на что менять? И где ? Поставил плагин....все записывает и работает
    
    Ответить
    - Ринат: 17.02.2023 в 21:15
      
      Плагин ставил на Joomla. А еще поставил как здесь коды на Битрикс (без плагинов, по этой инструкции). И все записывает, все работает. У Джумлы была проблема, что куки не записывала, их надо в настройках прописать. Спасибо автору. Полезная статья!
      
      Ответить
Миха: 11.09.2022 в 02:24

Автору плюс к карме!
Но вот с че я столкнулся:
Браузер ругается и сообщает, что есть ошибка в этой строке:
// показываем
cookiewin.style.display="block";
Но я понять не могу, что не так?
Где искать и как править.

Ответить
- Alexander: 12.09.2022 в 07:26
  
  А какая именно ошибка в консоле?
  
  Ответить
  - Имангали: 27.03.2024 в 14:31
    
    Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at common.js?v=3:14:15
    
    Ответить
Светлана: 21.11.2020 в 13:14

Подскажите пню. ))) Надо вставлять все эти три кода в соответствующие места?

Ответить
- Alexander: 22.11.2020 в 10:19
  
  CSS обычно в шапку, JS в подвал, а HTML в любое место страницы.
  
  Ответить
  - Светлана: 22.11.2020 в 22:28
    
    Благодарю.
    
    Ответить
    - Светлана: 30.11.2020 в 12:57
      
      Можно еще тупой вопрос? Я делаю сайт на webflow и модальное окошко уведомления делаю прям в редакторе. Мне надо тогда только JS вставить в подвал? Или так оно не сработает? И надо со всеми русскими словами переносить? ))) Не знаю об этом ничего. ))
      
      Ответить
      - Alexander: 30.11.2020 в 13:09
        
        Я без понятия как на webflow....
        Это одна из причин, почему не люблю всякого рода редакторы, контсрукторы и т.д.
        Глядеть нужно, как там что устроено.
        
        Ответить
  - Ник: 01.02.2022 в 22:47
    
    Здравствуйте! Можно ли как то адаптировать скрипт под другое? У меня есть небольшие плашки уведомдений, который можно закрыть, но обновив страницу мы их снова наблюдаем. Пробовал подбить код – не получилось...
    
    Ответить
    - Alexander: 01.02.2022 в 22:56
      
      JS код дан с куками, чтобы окно не показывалось при обновлении страницы и вообще, сроком на 1 день.
      Если у вас оно вылетает заного, то проблема где то в них.
      
      Ответить
      - Nik: 02.02.2022 в 18:51
        
        понял, ну вот сижу неделю. Размышляю..
        
        что могу делать не так - для меня аока загадка...
        
        Ответить
        
        Alexander: 03.02.2022 в 08:25
        
        Дайте ссылку на результат, погляжу что у вас там как.
        
        Ответить
- Андрей Ануфриев: 27.12.2021 в 04:27
  
  Светлана, да!
  Придётся это сделать поочередно! :0)
  
  Господа и дамы! Всех с наступающим!
  
  Ответить
Андрей: 04.11.2020 в 15:56

Нужно доработать скрипт, при обновлении страницы снова вылазит оповещение.

Ответить
- Alexander: 06.11.2020 в 09:49
  
  Код, который описан - там с куками
  Код, который используется для примера - нет кук (иначе, если нужно будет еще раз увидеть это окошко, вы его не увидите).
  
  Ответить
  - Андрей: 18.11.2020 в 10:42
    
    Спасибо, ещё вопросик по ошибке:
    Uncaught TypeError: Cannot read property 'style' of undefined
    at script.js?ver=1.1:13
    что он означает?
    
    Ответить
    - Андрей: 18.11.2020 в 11:04
      
      нашёл ошибку)))
      
      Ответить
      - Николай: 08.04.2021 в 14:16
        
        нашел ошибку и даже не написал в чем она была...
        
        Ответить
Котюшка: 13.05.2020 в 17:38

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

Ответить
- Alexander: 13.05.2020 в 17:48
  
  Код в примере с куками, должно бы работать.
  А сайт можно посмотреть? Что то с ними у вас не так, или с их путями.
  Или в ВК напишите, там проще будет разобраться
  
  Ответить
  - Андрей: 04.11.2020 в 15:59
    
    Тут же у них на сайте тож глюкнутый скрипт, при обновлении страницы снова вылазит
    
    Ответить
Котюшка: 13.05.2020 в 17:30

Привет! я вставляю js, кука отоброжается, но при перезагрузке страницы уведомление снова появляется, хотя кука сохранена

Ответить
irmaseo.ru: 13.03.2020 в 21:38

очень интересная статья

Ответить

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: