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

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

HIT

20.08.2015

1790

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

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

<script src="https://opttour.ru/wp-content/themes/tester/js/jquery.modal.min.js"></script>
<script src="https://opttour.ru/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){
// задержка 7 секунд
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="https://opttour.ru/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(https://opttour.ru/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="https://opttour.ru/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="https://opttour.ru/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(https://opttour.ru/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(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
display: none;
}

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

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

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