Всплывающее окно при бездействии пользователя.

Содержание:
1) Введение в принцип работы.
2) Окно на примере WordPress.
3) JotForm
4) Итоги

Сегодня я расскажу о всплывающем окне, которое появляется при отсутствии движения мышки в области отображения страницы вашего сайта. Что даёт такое окно?

Введение в принцип работы

На мой взгляд это очень престижная функция для сайта. Посудите сами, пользователь отвлёкся, выпустил мышку из рук, налил себе чай, вернулся к монитору и видит сообщение с контактной информацией или форму для связи с online-менеджером. Это же окно будет появляться, если пользователь свернул браузер или ушёл на соседнюю вкладку, то есть ваш сайт заметит отсутствие активности курсора мышки определённое время и выдаст сообщение, которое возможно вернёт интерес к вашему сайту.Screen Shot 2014-07-28 at 23.12.05

Спасибо Павлу, за предоставленный рабочий сценарий.

Принцип работы такого всплывающего окна основан на работе сценария JavaScript, а именно на библиотеке jQuery. Давайте рассмотрим создание всплывающего окна на примере WordPress.

 

Окно на примере WordPress

Откройте для редактирования файл header.php, который находится в папке с вашим шаблоном (wp-content/themes/ваш_шаблон/header.php). Практически все современные шаблоны уже содержат строку подключения библиотеки jQuery, если у вас она отсутствует, то добавьте её между тегами <head></head>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Далее необходимо добавить сам сценарий работы всплывающего окна (так же между тегами <head></head>):

 <script>
 idleTimer = null;
 idleState = false;
 idleWait = 180000; // задаём время ожидания бездействия
 (function ($) {
 $(document).ready(function () {
 $('*').bind('mousemove keydown scroll', function () {
 clearTimeout(idleTimer);
 if (idleState == true) {
 // Что делаем, когда пользователь активировался
 $(".close").click(function(){
 $("#bg").hide();
 $(".hiddenBlock").slideUp("fast");
 setTimeout ("$('#div1').fadeOut('slow');", 100);
 return false; //чтобы не активировалась форма, в которой кнопка закрытия
 })
 // Что делаем, когда пользователь активировался
 }
 idleState = false;
 idleTimer = setTimeout(function () {
 // Что делаем при бездействии юзера больше указанного времени
 $("body").ready(function() {
 setTimeout ("$('#div1').show('drop');", 1000);
 });
 // Что делаем при бездействии юзера больше указанного времени
 idleState = true;
 }, idleWait);
 });
 // Инициализация
 $("body").trigger("mousemove");
 });
 })(jQuery)
 </script>

Параметр idleWait задаёт время ожидания бездействия, а именно тот момент, когда пользователь отводит курсор мышки со страницы сайта до появления всплывающего окна.

 idleWait = 180000;

Следующий этап — это добавление html кода в тело сайта. Между тегами <body></body> вставляем наше всплывающее окно:

 <div id="div2" class="z-index: 1999;">
 <div id="div1" style="display: none; position: fixed; top: 35px; left:25%; background-color: grey; border: 1px solid lightblue; width: 660px; height: 600px; padding: 5px; z-index: 1999;">
 <div align="right" style="padding-bottom: 5px;"><button class="medium blue close" >&nbsp;x&nbsp;</button></div>
 <p align="center">Информация для пользователя</p>
 </div>
 </div>

Сохраняем и проверяем работу окна при бездействии мышки.

 

JotForm

Так же для вывода информации в модальном всплывающем окне можно использовать такой интересный сервис как JotForm.

JotForm — это онлайн конструктор, с помощью которого можно создавать разнообразные формы и поля для обратной связи.

Screen Shot 2014-07-29 at 10.38.00

Работать с JotForm очень просто:

  • вы создаёте необходимые области для заполнения,
  • можете осуществить поддержку нескольких языков,
  • после заполнения пользователем, вы получите уведомление на почту,
  • моментальное сохранение шаблона,
  • вывод формы на любую платформу и cms

Screen Shot 2014-07-29 at 10.38.19

 

Screen Shot 2014-07-29 at 10.47.33

После того как вы создали нужную форму, вы можете сохранить её в любом удобном для вас формате и вставить на сайт.

Screen Shot 2014-07-29 at 10.48.06

 

В своём первоначальном примере я использовал iFrame, так как он не вызывает конфликтов и работает как часы.

Screen Shot 2014-07-29 at 10.48.21

В итоге код для всплывающего окна в html выглядит так:

 <div id="div2" class="z-index: 1999;">
 <div id="div1">
 <div align="right"><button class="medium blue close" >&nbsp;x&nbsp;</button></div>
 <iframe src="http://www.jotformeu.com/form/40006319737345" align="middle" style="height:580px; width:100%; z-index: 1999;" frameborder="0"></iframe>
 </div>
 </div>

 

Итоги

В данном примере мы видим, что создать полезное всплывающее окно очень просто. Более того, с сервисом JotForm можно облегчить себе жизнь и собрать свою идеальную контактную форму, которая привлечёт пользователя и будет помогать ему, а не раздражать, как это часто бывает.

Очень надеюсь, что пост помог вам, а может и научил чему-то новому.

На этом всё. Подписывайтесь на новости, рассказывайте друзьям в социальных сетях и читайте блог.

end