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

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

HIT

20.08.2015

2523

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

[alert]Данный способ подключения скриптов не верный. Здесь описано как правильно подключать скрипты и стили.[/alert]Запускаем скрипт в 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;
}

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

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

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

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

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