Как сделать чтобы всплывающее окно показывалось один раз
Добавил пользователь Дмитрий К. Обновлено: 11.09.2024
В сегодняшнем уроке мы рассмотрим создание всплывающего окна на сайте с запуском через определенный промежуток времени. Эта потребность может возникнуть, например, при необходимости попросить email-адрес посетителя, предложить какую-нибудь скидку или порекомендовать к прочтению похожую по теме статью.
Вы наверняка видели на многих сайтах подобные поп-апы, и уже готовы сделать нечто подобное для вашего сайта.
Подготовительные работы
Для начала создадим базовый документ, где подключим плагин Colorbox, который отвечает за создание модальных окон на jQuery.
Показываем модальное окно
Обычно нам нужно к любому объекту HTML подвязать Colorbox с определенными параметрами:
Но в нашем случае мы не будем показывать модальное окно на сайте после взаимодействия с каким-либо объектом, а откроем его по прошествию определенного времени. Поэтому наш синтаксис будет следующим:
У Colorbox есть масса параметров и опций, с помощью которых можно очень гибко настроить отображение модального окна. Для нашего примера мы указали заголовок, задали размеры нашего окна и присвоили класс, по которому в CSS зададим оформление.
Теперь нам нужно задать время в миллисекундах, после которого наше модальное окно увидит посетитель. Для этого используем стандартную функцию JavaScript setTimeout
Теперь всплывающее окно на сайте появится через 10 секунд проведенных на странице, где установлен данный скрипт.
Фокусировка
Окно у нас есть, и чаще всего внутри будет призыв к действию. Например, вы попросите посетителя оставить свой email. Следственно в модальном окне у вас будет поле для ввода . Теперь можно упростить задачу посетителю: мы поместим курсор сразу в поле ввода.
Возврат фокуса
Наше модальное окно будет когда-то закрыто (по кнопке закрытия или после заполнения формы) и хорошо бы вернуть курсор пользователя в то место, где он был до момента появления всплывающего окна.
Для этого мы немного изменим наш код, и будем запоминать место в документе, где был пользователь до открытия поп-апа:
Как показывать всплывающее окно на сайте не чаще раза в час
Для показа модального окна раз в сутки код будет следующим:
Ниже вы видите то, что у нас получилось.
Через 10 секунд всплывает модальное окно с призывом. И это окошко показывается пользователю раз в сутки.
Также мы добавили кнопку с очисткой кук, чтобы вы могли несколько раз посмотреть на работу демо.
Свежие записи
© 2022 OneTwoSTUDY - Бесплатные видео уроки по WordPress, HTML, CSS, JavaScript, PHP и SWIFT. Как сделать сайт
Сегодня мы сделаем всплывающее окно, которое будет появляться при каждой новой сессии вашего посетителя. Сессия пользователя обновляется при вкл/выкл браузера клиента.
Итак нам понадобится плагин jQuery Cookie, который мы рассмотрели в прошлом посте, вот ссылка – откроется в новой вкладке.
Так же мы будем использовать вывод всплывающего окна, который сделали в посте – Делаем всплывающее окно.
Всплывающее окно – план действий
1. Мы будем проверять, был ли пользователь у нас на сайте. Если он впервые – то покажем окно, если нет – не покажем 🙂
2. Чтобы понять был пользователь на сайте или нет, мы создадим куки – visit и при первом же заходе посетителя будем присваивать ему значение true.
Вот и вся не замысловатая затея.
Реализация
1. Скачайте архив примера Всплывающего окна, ссылка.
2. Скачиваем скрипт плагина jQuery Cookie, ссылка.
3. Добавляем в index.html путь к файлу плагина jQuery Cookie
4. Все что нужно нам поменять в скаченном вами архиве – это файл скрипта. Вот полный код файла скрипта (пояснение к нему после самого кода)
Суть проста, делаем проверку был ли пользователь на сайте с помощью такого условия:
Если пользователю не было присвоено куки, то его значение будет undefined.
Далее, если пользователь впервые зашел на сайт в текущей сессии его браузера, то мы присваиваем ему куки visit со значением true и выводим наше всплывающее окно
Если пользователь уже был на сайте, то делать ничего не надо, else я прописал только для демо примера, так что этот участок кода совсем не обязателен
Выводы
Надеюсь этот пример совмещения двух постов вдохновит и вас на дальнейшие эксперименты и новые идеи 🙂
Я вот уже подумываю об появлении всплывающего окна при попытке пользователя закрыть страницу сайта…
This entry was posted in jQuery and tagged cookie, jQuery плагин, popup окно, куки. Bookmark the permalink.
В данной заметке приведен пример скрипта на jQuery, который откроет модальное окно при попытке посетителя покинуть страницу.
А у нас еще много всякого интересного.
Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.
Пример можно поглядеть на этой странице.
Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).
if ( ( $ ( ".exitblock" ) . is ( ':visible' ) ) && ( ! $ ( e . target ) . closest ( ".exitblock .modaltext" ) . length ) )
Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.
В этом случае JS нужно поставить такой:
if ( ( $ ( ".exitblock" ) . is ( ':visible' ) ) && ( ! $ ( e . target ) . closest ( ".exitblock .modaltext" ) . length ) )
Еще один вариант, в котором мы не показываем всплывающее окно, если посетитель провел на сайте определенное время.
if ( ( $ ( ".exitblock" ) . is ( ':visible' ) ) && ( ! $ ( e . target ) . closest ( ".exitblock .modaltext" ) . length ) )
Не забудьте, что на сайте должна быть подключена библиотека jQuery.
Смотрите также:
Модальные окна наоборот
Альтернативный показ всплывающих окон, открывающихся не на странице, а из-под нее.
Наклонная галерея
Небольшой скрипт на jQuery с наклонной каруселью фотографий
Модальное окно для контактов
Модальное окно для контактов или социальных сетей с фиксированной кнопкой
Добавить комментарий:
Комментарии:
А можно еще добавить чтобы на мобильниках показывалось через 30 секунд? То есть на дестопах при закрытие страницы, а на мобильниках через 30 секунд. Спасибо
Короче если навести на выпадающий список инпута в Chrome и если этот список будет очень большим, что вылезет из окна браузера, то тогда сработает триггер mouseleave. Не нашел пока способа решить эту проблему изящно.
Приветствую, а можете подсказать, как добавить событие, чтобы если человек например 10 секунд пробыл на странице, тоже всплывало это окно? И если оно открылось по времени, то при наведении его уже не было.
В последнем варианте темы заменяем первый:
$(".exitblock").remove(); на $(".exitblock").fadeIn("fast");
И соотв. 15 секунд на 10
Наверное немного неправильно выразился. Я хочу, чтобы это окно вылазило в таких вариациях:
1. Если наводим на строку выхода как сейчас.
2. Если человек провел на странице допустим 5 секунд, но не навёл на выход, а оно само вылезло.
Если срабатывает 2й вариант, то тогда желательно 1й уже не показывать.
А да, извиняюсь, работает. Спасибо!
Спасибо, все работает! Вопрос — как поменять modaltext на готовое всплывающее окно?
Тут так просто не скажешь…
Если у вас полностью свое модальное окно, тут надо не modaltext менять, а вообще все по сути.
При уходе курсора открывать его, а при закрытии удалять и добавлять при необходимости куки.
А если у вас просто оно нарисованное, то вставить в этот самый modaltext и все.
Ребят приветствую. А как по поводу конверсии? Никто не смотрел, не анализировал?
Меня просили ставить на пару сайтов, но потом просили убрать.
Спасибо за инфу
Все круто работает)) спасибо))
Если я правильно понял, то кука работает, но потом (при перезагрузке или другой странице).
Так и должно быть, страница же загрузилась и условие на ее чтение уже сыграло (когда ее не было).
Удалите окно через remove() и оно не появится вторично на странице.
А дальше соотв. будет работать условие куки.
подскажите где сделать шрифт больше?
Шрифт это font-size
Где именно? если меняю в font-size крестик меняет размер, сам шрифт остается такого же размера.
Тут нет оформления самого окна.
Оно же уникальное для всех случаев.
Используйте любое для класса modaltext
У вас JS код написан как HTML
Он должен быть в тегах script
О! Спасибо огромное, только при наведении на закрытие вкладки все равно ничего не происходит…
Попробуйте в скрипте изменить $ на jQuery
Или напишите в ВК мне, чтобы быстрее было 🙂
jQuery сработало — спасибо большое пребольшое.
Здравствуйте.
А подскажите, пожалуйста, что дописать в css чтобы у окна были не прямые углы, а закругленные?
Потестил — вроде работает, но вот уже сутки наблюдаю: есть пользователи, у которых по метрике и визит и 2-3 достижения цели…
Я ошибся с местом вызова ReachGoal?
В данной конструкции цель будет срабатывать всегда, когда курсор уходит к шапке браузера. Может и 20 раз на 1 посетителе. Т.е. окно не показывается, а цель сработает.
Поставьте так цель в тоже место:
Взял чуть шире отрезок, ибо: на локалке, почему-то всё работает как надо. А вот на сервере — мотает по прежнему на каждый выход из body (
Кэш, естественно, чистый, как и куки
А куки вообще пишутся?
Я точно не помню, но тоже что то долго с ними воевал.
Пишутся, ибо при проверке на сервере — показывается 1 раз в сутки (до очистки кук)…
Так если показываются раз в день…. Все же работает, нет?
Александр! Спасибо огромное, работает.
Правда, с особенностями: если модальное окно скрыто выход за body — цель не срабатывает. Так и надо.
Если модальное окно открыто выход за body (первый выход за body). Цель срабатывает. Так и надо
Если модальное окно открыто несколько выходов за body (туда-сюда мышкой возякать). Цель срабатывает. Так не надо, но не критично )))
В общем, работает всё, кроме того что, если при открытом модальном окне выйти N раз за body, то столько раз цель и будет выполнена.
Пеоеменную можно поставить, для разового выполнения:
Ответить в ветку уже не могу, видимо ограничение на вложенность комментов.
Спасибо Вам огромное. Кошеля Яденьги или wm на сайте не нашел, поэтому направил свою скромную благодарность на указанный телефонный номер. Любой труд должен быть если не оплачен, то вознагражден.
И Вам спасибо!
Обращайтесь, если что 🙂
Добрый день!
Подскажите, пожалуйста, только начинаю работать в веб-разработке и появилась задача реализации выпадающего окна, когда пользователь хочет выйти из сайта.
Подходит Ваш второй вариант скрипта, но , к сожалению, не получается его корректно применить, возможно, что-то не так делаю..(дополнительно к проекту подключаю jquery-3.4.1)
Не совсем понятна фраза "Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie."
это значит, что необходимо дополнительно подключить jquery-cookie?
Буду очень признательна за ответ!
jquery-cookie подключать не надо.
А что не получается, ошибки какие нибудь появляются?
Может из-за кук как раз и не показывается окно вам, т.к. записывается кука, с которой окно не появляется.
Хорошее решение, автору спасибо. Вариант с куки вообще супер, очень частая проблема что многие примеры модалок и других призывов, которые требуют куки, как правило идут без них, процветания …..
На первом примере можете сделать if при выxоде "или" после 60 секунд наxождения на сайте? Я проста жаваскрипт не знаю.
setTimeout("document.getElementById('exitblock').style.display='block'", 60000);
добавлять после кода и добавить id на элемент. тогда появится окно через 60 сек.
Добрый день. Спасибо за Ваше решение, будем его использовать у себя на сайте.
Я прошу прощения, но мне не совсем понятно с всплывающей формой на сайте через 60 секунд. Вроде сделал как Вы написали а ничего не работает. Можете поподробнее рассказать ка реализовать данную функцию?
Спасибо, уже сам разобрался.
Пробовал устанавливать по-очереди все три варианта скрипта, но что-то у меня не пошло. После установки на сайт модальное окно изначально видно и никоим образом не убирается. Мне нужен второй вариант. Я в JS не силён и потому понять в чём причина мне сложно. Браузер Яндекс. В других пока не пробовал. Буду признателен, если подскажите. Устанавливал вроде всё правильно. Стили после библиотеки, скрипт после стилей ( перед ), сам код окна перед
Всех нас минимум единожды раздражали всплывающие окна на сайтах. Кажется, что этот маркетинговый инструмент способен только надоедать посетителям. Однако при грамотном подходе pop up окна могут увеличить конверсию, при этом не вызывая негативных эмоций у людей. В этом посте я расскажу подробнее о всплывающих окнах, их видах и о том, как их правильно использовать.
- 1. Что такое всплывающее окно
- 2. Почему pop-up окна важны
- 3. Как сделать всплывающие окна полезными
- 4. Чего лучше избегать при использовании pop-up окон
1. Что такое всплывающее окно
Всплывающие окна — это небольшие окна, которые показываются на экране, когда посетитель находится на сайте. Это один из видов рекламы, используемый для привлечения внимания пользователей и мотивации выполнить какое-либо действие (перейти на другую страницу, оставить свои контактные данные, подписаться на рассылку, купить продукт и пр.).
Пример всплывающего окна:
Классифицировать pop up окна можно по двум характеристикам:
- Когда они появляются:
- сразу при открытии страницы,
- при закрытии сайта
- после того как пользователь проведёт на сайте определённое время
- прокрутит до конкретной части и т.п.
- Где находятся:
- сбоку,
- в верхней или нижней части экрана,
- посередине или занимают весь экран, перекрывая контент страницы.
2. Почему pop-up окна важны
Рассмотрим причины, почему стоит использовать pop up окна на сайте:
3. Как сделать всплывающие окна полезными
Навязчивые всплывающие окна в большом количестве не только могут раздражать посетителе, но даже привести к падению позиций в выдаче Google.
Чтобы сделать pop up были максимально эффективными, придерживайтесь рекомендаций, которые я перечислю ниже.
3.1 Добавляйте ценностное предложение
Помните, что у вас есть не так много времени что-то донести → зачастую пользователи закрывают pop up окно спустя пару секунд после его появления. Поэтому минимизируйте текст в окне и кратко опишите, какие выгоды получит человек, если выполнит то, что вы предлагаете.
Например, если вам нужен адрес электронной почты посетителя, недостаточно его попросить. Опишите выгоды: например, вы будете отправлять уникальные и полезные материалы. Или предложите что-то особенное: купон на скидку, лид-магнит и пр.
Пример всплывающего окна с ценностным предложением
3.2. Упростите закрытие всплывающего окна
Не заставляйте посетителей искать кнопку закрытия окна, это очень раздражает. Позвольте им закрыть всплывающее окно просто и быстро. Сделайте видимой кнопку закрытия [X] в углу и разрешите пользователям кликать за пределами всплывающей области, чтобы также закрыть окно.
3.3. Не спамьте
Много всплывающих окон или многократное появление одного окна приведёт к тому, что посетители больше не захотят находиться и возвращаться на сайт.
3.4. Рассчитайте время появления всплывающего окна
Хорошая тактика — показывать pop up окна не сразу после того, как посетитель зашёл на сайт, а через некоторое время — так вы произведёте более положительное впечатление. Дайте пользователям немного освоиться и ознакомиться с вашим контентом
Один из вариантов — настроить появление окна по прошествии 30% от среднего времени пребывания на сайте. Среднюю длительность сеанса можно узнать в Google Аналитике.
Умножьте это время его на 0,3. Так вы определите, когда показывать всплывающее окно.
3.5. Всплывающие окна должны соответствовать общему дизайну
Иначе пользователи могут подумать, что это реклама другого бренда. Всплывающие окна должны соответствовать основному цвету, типографике и стилю сайта.
Также нужно помнить, что дизайн играет важную роль в восприятии. Поэтому постарайтесь сделать так, чтобы:
- всплывающее окна были заметными и привлекательными,
- они смотрелись гармонично,
- текст был читабельным,
- окна были адаптивными и подстраивались под разные размеры экранов.
3.6. Сделайте заметным призыв к действию
Призыв к действию (CTA) должен отличаться на общем фоне и привлекать внимание, чтобы посетители видели, куда им нужно нажать. Выделите CTA контрастным цветом и пропишите и добавьте активный глагол.
Пример не самого удачного CTA
А вот хороший пример:
4. Чего лучше избегать при использовании pop-up окон
Чтобы не раздражать пользователей, придерживайтесь таких правил:
- Не перегружайте посетителей. Иногда при входе на сайт появляются уведомления о файлах cookie, онлайн-чаты, запросы на использование местоположения и пр. Если вам важно, чтобы несколько всплывающих окон отображались на сайте, сделайте так, чтобы они не появлялись одновременно, и чтобы не занимали весь экран.
- Не показывайте всплывающие окно после совершения целевого действия. Когда посетитель выполнил целевое действие, pop-up не должно ему больше показываться
- Не показывайте всплывающие окно после того как пользователь его закрыл. Нужно им навязывать своё предложение, если он от него один раз отказался.
- Не размещайте всплывающие окна на каждой странице сайта.
Подводим итоги
Всплывающие окна — инструмент продвижения, который при правильном подходе может принести конверсии. Чтобы pop up окна были эффективными, придерживайтесь таких рекомендаций:
- окно должно содержать ценностное предложение,
- дайте возможность посетителям быстро закрыть всплывающее окно,
- не спамьте pop up окнами,
- рассчитайте время появления всплывающего окна,
- всплывающие окна не должны сильно отличаться от дизайна сайта,
- призыв к действию должен быть понятным и заметным.
А у вас есть опыт в создании всплывающих окон? Поделитесь в комментариях 😊
Читайте также: