Всплывающее окно при посещении сайта

Существуют различные сообщения, которые необходимо показать посетителю один раз, либо повторять с определенной частотой во времени. В этом случае поможет технология cookie. При показе сообщения (всплывающего окна) браузер «запоминает» что показывал его и при следующем посещении не выводит его.

Подключаем необходимые скрипты в HEADER’е

<script src="/wp-content/themes/tester/js/jquery.modal.min.js"></script>
<script src="/wp-content/themes/tester/js/jquery.cookie.min.js"></script>

Запускаем скрипт в FOOTER’е

<script type="text/javascript">
$(window).load(function() {

	var hideTheModal = $.cookie('hideTheModal');
	// если cookie не установлено...
	
	if(hideTheModal == null){
		setTimeout(function(){ // задержка
			// вызвать модальное окно
			$('#opn-win').modal();
			// если кнопка "Закрыть" нажата
			$('.close-modal').click(function(){
				// добавить cookie
				$.cookie('hideTheModal','true', { expires: 1, path: '/' } );
			});
		}, 200);
	}
	
});
</script>

expires: 1 — сколько дней будут хранится cookies
Выделенного скрипта в базе данного сайта нет.

И следом код окна

<div id="opn-win" style="display:none;" class="animated fadeInDown">
	<img src="/wp-content/uploads/2015/08/rachel_mcadams.jpg" alt="rachel_mcadams" width="620" height="415" /><br>
	<p>Благодарим за посещение сайта!</p>
</div>

SCC модального окна

/* Всплывающее модальное окно */

.modal {
	display: none;
	background-color: #000;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url(/wp-content/themes/tester/images/close.png) no-repeat 0 0;
}

.modal p {
	color: #fff;
	text-align: center;
	padding: 15px;
	font-size: 20px;
}

Альтернативная (сокращенная версия)

Подключаем в HEADER’е только скрипт cookie

<script src="/wp-content/themes/tester/js/jquery.cookie.min.js"></script>

Верстка в подвале

<div id="opn-win" style="display:none;" class="animated fadeInDown">
	<a href="#"><p class="close-modal"></p></a>
	<img src="/wp-content/uploads/2015/09/20570043250_699041bc2f_o.jpg" alt="rachel_mcadams" width="625" height="500" /><br>
	<p>Благодарим за посещение сайта!</p>
</div>

+ где-то на сайте должен быть добавлен фон модального окна

<div id="backfon"></div> <!-- фон для модального окна -->

Скрипт

// Всплывающее окно при первом посещении сайта

$(window).load(function() {
	var hideTheModal = $.cookie('hideTheModal');
	
	// если cookie не установлено...
	if(hideTheModal == null){
	
		// задержка 7 секунд
		setTimeout(function(){
		
			// вызвать модальное окно
			$('#opn-win').show(); // заменил .modal на .show();
			$('#backfon').show();
			$('#backfon').removeClass('fadeOut');
			$('#backfon').addClass('animated fadeIn');
			
			// если кнопка "Закрыть" нажата
			$('.close-modal').click(function(){ // закрыл пока куки

				// Скрываем окно
				$('#opn-win').addClass('fadeOutDown');
				$('#backfon').addClass('fadeOut');
				setTimeout(function () { $('#sea').hide(); $('#backfon').hide(); }, 700);

				// добавить cookie
				$.cookie('hideTheModal','true', { expires: 1, path: '/' } );
				
			});
		}, 3000);
	}
});

$(document).ready(function() {
	$('#backfon').click(function() {

		$('#opn-win').addClass('fadeOutDown');
		$('#backfon').addClass('fadeOut');
		setTimeout(function () { $('#sea').hide(); $('#backfon').hide(); }, 700);

	});
});

CSS

/* Всплывающее модальное окно */

#opn-win {
	width: 40%;
	margin: 0 30%;
	position: fixed;
	top: 10%;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 999;
	text-align: center;
}

p.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	text-indent: -9999px;
	background: url(/wp-content/themes/tester/images/close.png) no-repeat 0 0;
}

#opn-win p {color: #fff; text-align: center; padding: 15px; font-size: 20px;}
#opn-win img {width: 100%; height: auto;}

+ CSS фона

#backfon {
	background-color: rgba(0, 0, 0, 0.5);
	background-image: url(/wp-content/themes/tester/images/bg-pattern.png);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
}

Предупреждение о Cookies

Верстка

<div id="cookies-alert" style="display: none;"><div>
	<p>Для повышения удобства использования и покупок в интернет-магазине мы используем cookies. 
	Оставаясь на сайте вы соглашаетесь с <a href="/privacy/">Политикой их применения</a></p>
	<div class="cookies-alert-close-btn">X</div>
</div></div>

Стили

#cookies-alert > div {
    position: fixed;
    bottom: 0;
    background: rgba(238, 238, 238, 0.8);
    width: 100%;
    justify-content: center;
	align-items: center;
    display: flex;
}

.cookies-alert-close-btn {margin-left: 15px; cursor: pointer;}

Скрипт

jQuery(window).load(function() {

	var hideTheModal = jQuery.cookie('hideTheModal');
	
	if(hideTheModal == null){
		jQuery('#cookies-alert').show();
		jQuery('.cookies-alert-close-btn').click(function(){
			jQuery('#cookies-alert').hide();
			jQuery.cookie('hideTheModal','true', { expires: 1, path: '/' } );
		});
	}
	
});

Поделиться в соц. сетях: