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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Открытие модального окна, когда пользователь уходит со страницы

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

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

А у нас еще много всякого интересного.

Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.

Пример можно поглядеть на этой странице.

Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).

Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.

В этом случае JS нужно поставить такой:

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

Не забудьте, что на сайте должна быть подключена библиотека jQuery.

  • Опубликовано: 16.04.2017 / Обновлено: 10.08.2018
  • Рубрики: Модальные окна
  • Метки: jQuery
  • 36090 просмотров

Смотрите также:

Простое модальное окно на JS

Создание простого анимированного модального окна на JS без использования плагинов

Модальные окна наоборот

Альтернативный показ всплывающих окон, открывающихся не на странице, а из-под нее.

Анимированные полноэкранные модальные окна

Плагин jQuery animatedModal.js для создания анимированных полноэкранных модальных окон

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

Комментарии:

Приветствую, спасибо за скрипт, подскажите, в чем проблема. Я использую jQuery.cookie, функция у меня такая
if (!jQuery.cookie(‘hideModa’)) <
jQuery(document).mouseleave(function(e) <
if (e.clientY

    Если я правильно понял, то кука работает, но потом (при перезагрузке или другой странице).
    Так и должно быть, страница же загрузилась и условие на ее чтение уже сыграло (когда ее не было).

    Удалите окно через remove() и оно не появится вторично на странице.
    А дальше соотв. будет работать условие куки.

    подскажите где сделать шрифт больше?

    Шрифт это font-size

    Где именно? если меняю в font-size крестик меняет размер, сам шрифт остается такого же размера.

    Тут нет оформления самого окна.
    Оно же уникальное для всех случаев.
    Используйте любое для класса modaltext

    Доброго дня!
    ..у меня что-то пошло не так, окно наверху показывается (вывела модулем с позицией в шапке) и js-код (его написалав админке в шаблоне в окошке "Before ")..
    Вот сайт http://grand.rntk-test2.ru

    У вас JS код написан как HTML
    Он должен быть в тегах script

    О! Спасибо огромное, только при наведении на закрытие вкладки все равно ничего не происходит…

    Попробуйте в скрипте изменить $ на jQuery
    Или напишите в ВК мне, чтобы быстрее было &#128578;

    jQuery сработало — спасибо большое пребольшое.

    Здравствуйте.
    А подскажите, пожалуйста, что дописать в css чтобы у окна были не прямые углы, а закругленные?

    Добрый вечер!
    Спасибо за скрипт.
    Судя по всему — немного не разобрался: нужно было добавить код метрики — для подсчета по цели "показ модального окна".
    Добавил сюда:

    Потестил — вроде работает, но вот уже сутки наблюдаю: есть пользователи, у которых по метрике и визит и 2-3 достижения цели…

    Я ошибся с местом вызова ReachGoal?

    В данной конструкции цель будет срабатывать всегда, когда курсор уходит к шапке браузера. Может и 20 раз на 1 посетителе. Т.е. окно не показывается, а цель сработает.

    Поставьте так цель в тоже место:

    Взял чуть шире отрезок, ибо: на локалке, почему-то всё работает как надо. А вот на сервере — мотает по прежнему на каждый выход из body (

    Кэш, естественно, чистый, как и куки

    А куки вообще пишутся?
    Я точно не помню, но тоже что то долго с ними воевал.

    Пишутся, ибо при проверке на сервере — показывается 1 раз в сутки (до очистки кук)…

    Так если показываются раз в день…. Все же работает, нет?

    Александр! Спасибо огромное, работает.

    Правда, с особенностями: если модальное окно скрыто выход за body — цель не срабатывает. Так и надо.
    Если модальное окно открыто выход за body (первый выход за body). Цель срабатывает. Так и надо

    Если модальное окно открыто несколько выходов за body (туда-сюда мышкой возякать). Цель срабатывает. Так не надо, но не критично )))

    Из предыдущего сообщения удалились знаки Плюс, поэтому выглядит как будто писал идиот )))

    В общем, работает всё, кроме того что, если при открытом модальном окне выйти N раз за body, то столько раз цель и будет выполнена.

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

    Ответить в ветку уже не могу, видимо ограничение на вложенность комментов.

    Спасибо Вам огромное. Кошеля Яденьги или wm на сайте не нашел, поэтому направил свою скромную благодарность на указанный телефонный номер. Любой труд должен быть если не оплачен, то вознагражден.

    И Вам спасибо!
    Обращайтесь, если что &#128578;

    Спасибо за скрипт сейчас попробую на своем сайте https://oberi.ru

    Добрый день!
    Подскажите, пожалуйста, только начинаю работать в веб-разработке и появилась задача реализации выпадающего окна, когда пользователь хочет выйти из сайта.
    Подходит Ваш второй вариант скрипта, но , к сожалению, не получается его корректно применить, возможно, что-то не так делаю..(дополнительно к проекту подключаю jquery-3.4.1)
    Не совсем понятна фраза "Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie."
    это значит, что необходимо дополнительно подключить jquery-cookie?
    Буду очень признательна за ответ!

    jquery-cookie подключать не надо.

    А что не получается, ошибки какие нибудь появляются?
    Может из-за кук как раз и не показывается окно вам, т.к. записывается кука, с которой окно не появляется.

    Хорошее решение, автору спасибо. Вариант с куки вообще супер, очень частая проблема что многие примеры модалок и других призывов, которые требуют куки, как правило идут без них, процветания …..

    На первом примере можете сделать if при выxоде "или" после 60 секунд наxождения на сайте? Я проста жаваскрипт не знаю.

    setTimeout("document.getElementBy ", 60000);
    добавлять после кода и добавить id на элемент. тогда появится окно через 60 сек.

    Добрый день. Спасибо за Ваше решение, будем его использовать у себя на сайте.
    Я прошу прощения, но мне не совсем понятно с всплывающей формой на сайте через 60 секунд. Вроде сделал как Вы написали а ничего не работает. Можете поподробнее рассказать ка реализовать данную функцию?

    Спасибо, уже сам разобрался.

    Пробовал устанавливать по-очереди все три варианта скрипта, но что-то у меня не пошло. После установки на сайт модальное окно изначально видно и никоим образом не убирается. Мне нужен второй вариант. Я в JS не силён и потому понять в чём причина мне сложно. Браузер Яндекс. В других пока не пробовал. Буду признателен, если подскажите. Устанавливал вроде всё правильно. Стили после библиотеки, скрипт после стилей ( перед ), сам код окна перед