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

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

HIT

20.08.2015

5098

Существуют различные сообщения, которые необходимо показать посетителю один раз, либо повторять с определенной частотой во времени. В этом случае поможет технология 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: '/' } );
		});
	}
	
});
[site-socialshare]
  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Всплывающее окно при посещении сайта Всплывающее окно при посещении сайта
Шаблон страницы из плагина
Рекомендации для васШаблон страницы из плагинаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.