Красивое уведомление на CSS3 с запоминанием закрытия на cookies

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

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

 

HTML код уведомлений


	<div id="error" class="message"</span>><a id="close" title="Закрыть" href="#" onclick="document.getElementById(\'error\').setAttribute(\'style\',\'display: none;\');"</span>>&times;</a</span>>
	<span</span>>Внимание!</span</span>> Сообщение о критической ошибке.
	</div</span>>
	<div id="warning" class="message"</span>>
	<a id="close" title="Закрыть" href="#" onclick="document.getElementById(\'warning\').setAttribute(\'style\',\'display: none;\');"</span>>&times;</a</span>>
	<span</span>>Упс!</span</span>> Предупреждающее сообщение.
	</div</span>>
	<div id="info" class="message"</span>>
	<a id="close" title="Закрыть" href="#" onclick="document.getElementById(\'info\').setAttribute(\'style\',\'display: none;\');"</span>>&times;</a</span>>
	<span</span>>Важно!</span</span>> Просто информационное сообщение.
	</div</span>>
	<div id="success" class="message"</span>>
	<a id="close" title="Закрыть" href="#" onclick="document.getElementById(\'success\').setAttribute(\'style\',\'display: none;\');"</span>>&times;</a</span>>
	<span</span>>Поздравляем!</span</span>> Сообщение об успешном действии.
	</div</span>>
	

CSS код уведомлений


	/* базовый контейнер уведомлений */.message{
	background-size: 40px 40px;
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	transparent 75%, transparent);
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	transparent 75%, transparent);
	box-shadow: 0 0 8px rgba(0,0,0,.3);
	font:16px \'Open Sans\';
	width: 85%;
	margin: 20px auto;
	padding:15px;
	-moz-animation: bg-animate 5s linear infinite;
	-webkit-animation: bg-animate 5s linear infinite;
	-ms-animation: bg-animate 5s linear infinite;
	animation: bg-animate 5s linear infinite;
	}
	/* заголовок сообщения */
	.message span{font-weight:600;}
	/* кнопка закрытия */
	.message #close{float:right; color:inherit; text-decoration:none;}
	/* сообщение об ошибке */
	.message#error{
	background-color:tomato;
	border-left:7px #dc3d21 solid;
	color:white;
	}
	/* предупреждение */
	.message#warning{
	background-color: #eaaf51;
	border-left:7px #df8b00 solid;
	color:#6b6d31;
	}
	/* инфо-блок */
	.message#info{
	background-color: #4ea5cd;
	border-left:7px #3b8eb5 solid;
	color:#beecfc;
	}
	/* успешное событие */
	.message#success{
	background-color: #61b832;
	border-left:7px #55a12c solid;
	color:#296829;
	}
	/* анимация */
	@-webkit-keyframes bg-animate {
	from {
	background-position: 0 0;
	}
	to {
	background-position: -80px 0;
	}
	}
	@-moz-keyframes bg-animate {
	from {
	background-position: 0 0;
	}
	to {
	background-position: -80px 0;
	}
	}
	@keyframes bg-animate {
	from {
	background-position: 0 0;
	}
	to {
	background-position: -80px 0;
	}
	}
	

Ну а теперь рассмотрим код, который позволит закрыть уведомление и сохранить информацию об этом действии в куках браузера ваших посетителей.

Прежде всего подключим два файла в <head>:


	<script type=\'text/javascript\' src="/jquery.cookie.min.js"></script>
	<script type="text/javascript" src="/browser.js"></script>
	

Где jquery.cookie.min.js это плагин cookies
А browser.js наш будущий скрипт для записи данных в cookie

 

HTML код уведомления у меня выглядит следующим образом:

 <div id="browserinfo" style="display:none;">
	<div id="success" class="message">
	<a id="close" value="X" onclick="closePopup();" title="Закрыть" href="#">&times;</a>
	<div class="messagetext"><span>Поздравляем!</span> Сообщение об успешном действии. </div>
	</div></div><script type="text/javascript">init();</script>

Обозначения:

id="browserinfo"

Обозначает уникальный id элемента для которого мы будем делать изменения (display none) в зависимости от того закрыл посетитель уведомление или нет.

onclick="closePopup();"

Вызывает функцию closePopup которая определена в browser.js
Функция вызывает по нажатию на кнопку.

<script type="text/javascript">init();</script>

Автоматически выполняет функцию init которая определена в browser.js
Данная функция включает отображение блока если в куках еще нет записи о том, что пользователь закрыл уведомление.

 

А вот полный код файла browser.js

 

 function createCookie(name,value,days)
	{
	if (days)
	{
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
	}
	function getCookie(name)
	{
	var cookie = " " + document.cookie;
	var search = " " + name + "=";
	var setStr = null;
	var offset = 0;
	var end = 0;
	if (cookie.length > 0) {
	offset = cookie.indexOf(search);
	if (offset != -1) {
	offset += search.length;
	end = cookie.indexOf(";", offset)
	if (end == -1) {
	end = cookie.length;
	}
	setStr = unescape(cookie.substring(offset, end));
	}
	}
	return(setStr);
	}
	function closePopup()
	{
	createCookie("closed_popup", "true", "2"); //2 - кол-во дней которое браузер будет помнить куки
	//scriptsmaster.ru
	document.getElementById(\'browserinfo\').style.display = \'none\'
	}
	function init()
	{
	var cookie = getCookie("closed_popup");
	if(cookie != "true")
	{
	document.getElementById(\'browserinfo\').style.display = \'block\';
	}
	}
	function checkPopup() {
	if (getCookie(\'closed_popup\') == null) { // if popup was not closed
	document.getElementById(\'browserinfo\').style.display = \'block\';
	}
	}

 

Файл jquery.cookie.min.js вы можете скачать ниже