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

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

HIT

20.08.2015

5337

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

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

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6170

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

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