При закрытии сайта всплывает окно

При закрытии сайта всплывает окно

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

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

Конечно, споры о том, стоит ли добавлять всплывающее окно при закрытии страницы на свой сайт будут вечными. Одни говорят, что для тех, кто добавляет его — уготовлено отдельное место в Аду, что это дико бесит, что если я решил уйти, то я уйду и никакие всплывающие окна меня не остановят, а только будут раздражать. Другие говорят, что такие всплывающие окна повышают конверсию и отлично работают. Я думаю, попробовать стоит, а там, на основе статистики, АА и АБ тестов делать уже конкретные выводы относительной вашей ниши и продукта.

Как сделать всплывающее окно при закрытии страницы

На самом деле, я не стал мудрствовать лукаво и просто немного изменил прошлую статью, добавил несколько строчек javascript кода. Раньше, модальное окно появлялось при первом посещении сайта. Сейчас оно будет показываться только при первом посещении сайта (когда курсор покидает основную область сайта и переходит в район вкладок). Если пользователь еще раз зайдет на сайт, то у него не будет показываться это окно. Реализовано это точно так же, как и в прошлой статье, при помощи cookie. Кука хранится 7 дней, можете указать любое количество на свое усмотрение.

И еще, мы не вешаем событие на клик по крестику во вкладке, а просто проверяем положение курсора. Мы не блокируем окно, кнопки и прочее, ничего не требуем, а просто показываем окошко.

Читайте также:  Программа для склейки видео на андроид

Как и в прошлый раз, будем использовать jQuery плагин arcticModal, а значит подключаем сам jQuery:

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

И подключаем тему плагина, я пользуюсь стандартной, но вы можете написать и свою:

Теперь, чтобы работали наши cookie — добавим плагин cookies от Яндекса:

И подключаем скрипт config.js со следующим содержимым:

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

Кстати, в прошлый раз забыл объяснить, что означают эти параметры:

  • closeOnOverlayClick — позволяет закрыть окно при клике на любую область в не окна.
  • closeOnEsc — закрывает окно при нажатии на Escape

Теперь о самой разметке страницы. Не изменилось ровным счетом — ничего.

Немного объясню. modalInner — обертка модального окна, с display:none в стилях. offer — класс самого модального окна. Если будете менять его, то не забудьте поменять класс и в скрипте.

Вот такая простая реализация всплывающего окна при закрытии страницы. А как вы считаете, стоит ли использовать подобный эффект на сайте?

Наверное, вы замечали на некоторых сайтах такую неприятность — когда пытаетесь закрыть вкладку вылазит окно с какой-то информацией просящей пользователя обратить на нее внимание.

И все бы ничего, но чтобы закрыть сайт пользователю нужно будет дотянуть мышь до кнопки "Все равно закрыть" и кликнуть по ней. Такие всплывайки признак плохого тона. Они очень сильно мешают гостям нормально работать в сети. Их ставить я не советую. Вообще любое всплывающее окно нужно использовать только там, где это действительно необходимо.

Читайте также:  Сайт госуслуги красноярск личный кабинет

Но если вы хотите поставить подобной скрипт, то рекомендую более изящный вариант.

Срипт, который вы можете скачать и просмотреть ниже работает так. Если пользователь стал вести мышь к вкладкам браузера, чтобы выбрать другой сайт — быстро и плавно, с затемнением экрана появится ваша всплывайка, в которую вы можете поставить любой html код от картинок до видео, а также приукрасить как угодно за счет css.

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

Таким образом, данная всплывайка, действительно, может быть полезной для удержания ваших пользователей. Обычно в нее размещают контакты, супер акцию или форму заказа звонка. Код имеет минимальный размер и не будет грузить ваш сайт.

В сегодняшнем уроке Вы узнаете как сделать красивое модальное окно, которое всплывает при попытке посетителя выйти.

Это довольно интересный пример. Суть заключается в том, что как только посетитель наводит мышку на верхний край сайта (то есть пересекает его в попытке нажать на крестик для закрытия окна) запускается скрипт и выводит окно на экран.

Все что от нас требуется — это прописать несколько строчек между тегами :

Как Вы видите тут мы просто инициализируем jQuery и пару вспомогательных скриптов. Также подключаем таблицу стилей.

Далее где-нибудь в документе вставляем текст всплывающей подсказки:

Вот и вся технология! Суть данного метода заключается в том, что в файле init.js находится инструкция, которая вызывает всплывающее окно как только пользователь достигает последних 5 пикселей сайта. Значение "5" можно заменить на любое произвольное.

Читайте также:  Как удалить линейки в фотошопе

На сегодня все! Всем хорошего вечера!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.bitrepository.com
Перевел: Максим Шкурупий
Урок создан: 11 Мая 2009
Просмотров: 101832
Правила перепечатки

5 последних уроков рубрики "jQuery"

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Ссылка на основную публикацию
Почему роутер режется скорость интернета по wifi
Наверное, очень многие из нас вплотную сталкивались с одной неприятной проблемой. При подключении к интернету через роутер заметно падает скорость...
Почему в повер поинте не меняется шрифт
Если в Power Point 2003 не меняется шрифт Делаю презентацию в Power Point для защиты диплома, столкнулась с такой проблемой,...
Почему в почте не отображаются картинки
В браузере Mozilla Firefox выше версии 23, выключить отображение картинок невозможно. В браузере Mozilla Firefox ниже версии 23: Откройте браузер...
Почему рябит звук на ноутбуке
Работа и развлечение за компьютером не могут считаться полноценными, если на нем отсутствует звук. Он необходим, чтобы смотреть фильмы, слушать...
Adblock detector