Создание сообщения об использовании куки (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, Авторское
44416 просмотров

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

Ночная тема для сайта

Переключение светлой темы сайта на темную и наоборот

Автоматическое поздравление с праздниками

PHP скрипт, который автоматически будет выводить сообщения на сайте в зависимости ото дня месяца

Блокирование элементов сайта при включенном AdBlock на CSS

Простое решение на CSS, как отображать разный контент в зависимости от включенного AdBlock

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

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

Александр: 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:

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

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

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