Спливаюче вікно при закритті сторінки

Добрий день

Добрий день. Нещодавно викладав статтю про те, як зробити спливаюче вікно при першому відвідуванні сайту , Але багато хто просив додати статтю з дзеркальним ефектом, щоб віконце з'являлася при догляді відвідувача з сайту, тобто при спробі закрити сторінку.

Сьогодні й поговоримо на цю тему, і я покажу просту реалізацію.

Звичайно, суперечки про те, чи варто додавати спливаюче вікно при закритті сторінки на свій сайт будуть вічними. Одні кажуть, що для тих, хто додає його - уготоване окреме місце в Аду, що це дико дратує, що якщо я вирішив піти, то я піду і ніякі спливаючі вікна мене не зупинять, а тільки дратуватимуть. Інші кажуть, що такі спливаючі вікна підвищують конверсію і відмінно працюють. Я думаю, спробувати варто, а там, на основі статистики, АА і АБ тестів робити вже конкретні висновки відносної вашої ніші і продукту.

Насправді, я не став мудрувати лукаво і просто трохи змінив минулу статтю, додав кілька рядків javascript коду. Раніше, модальне вікно з'являлося при першому відвідуванні сайту. Зараз воно буде показуватися тільки при першому відвідуванні сайту (коли курсор залишає основну область сайту і переходить в район вкладок). Якщо користувач ще раз зайде на сайт, то у нього не буде показуватися це вікно. Реалізовано це точно так же, як і в минулій статті, за допомогою cookie. Кука зберігається 7 днів, можете вказати будь-яку кількість на свій розсуд.

І ще, ми не вішаємо подія на клік по хрестику у вкладці, а просто перевіряємо положення курсора. Ми не блокуємо вікно, кнопки та інше, нічого не вимагаємо, а просто показуємо віконце.

Як і минулого разу, будемо використовувати jQuery плагін arcticModal , А значить підключаємо сам jQuery:

<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </ script>

Далі підключаємо сам плагін, у мене він так і лежить в папці libs, тому такий шлях:

<Script src = "libs / arcticmodal / jquery.arcticmodal.js"> </ script> <link rel = "stylesheet" href = "libs / arcticmodal / jquery.arcticmodal.css">

І підключаємо тему плагіна, я користуюся стандартної, але ви можете написати і свою:

<Link rel = "stylesheet" href = "libs / arcticmodal / themes / simple.css">

Тепер, щоб працювали наші cookie - додамо плагін cookies від Яндекса:

<Script src = "// yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"> </ script>

І підключаємо скрипт config.js наступного змісту:

$ (Document) .ready (function () {if (! $. Cookie ( 'smartCookies')) {$ (document) .mouseleave (function (e) {function getWindow () {$ ( '. Offer'). Arcticmodal ({closeOnOverlayClick: true, closeOnEsc: true});}; setTimeout (getWindow, 1); $ .cookie ( 'smartCookies', true, {expires: 7, path: '/'});});};} );

Якщо читали минулу статтю, то помітили, що нічого не змінилося, крім того, що трохи видозмінився скрипт у файлі config.js. Тобто просто з'явилося ще одна умова, яке спрацьовує, коли курсор залишає область сайту, тобто перебувати в районі вкладок.

До речі, минулого разу забув пояснити, що означають ці параметри:

closeOnOverlayClick: true, closeOnEsc: true

  • closeOnOverlayClick - дозволяє закрити вікно при кліці на будь-яку область в НЕ вікна.
  • closeOnEsc - закриває вікно при натисканні на Escape

Тепер про саму розмітці сторінки. Чи не змінилося геть - нічого.

<Div class = "modalInner"> <section class = "offer"> <h2> Тут буде ваша пропозиція, форма тощо. </ H2> Можете вставити форму або запропонувати підписатися на вас в соціальних мережах </ section> < / div>

Трохи поясню. modalInner - обгортка модального вікна, з display: none в стилях. offer - клас самого модального вікна. Якщо будете міняти його, то не забудьте поміняти клас і в скрипті.

Ось така проста реалізація спливаючого вікна при закритті сторінки. А як ви вважаєте, чи варто використовувати подібний ефект на сайті?

Завантажити исходник з demo

А як ви вважаєте, чи варто використовувати подібний ефект на сайті?