Как сделать всплывающее (pop-up) окно? Плавающие бойлы своими руками

Здравствуйте друзья! В данной статье рассмотрим, как самостоятельно создать Pop Up окно и установить его на блог. Данное мероприятие увеличит сбор подписчиков с Вашего блога.

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

Поп ап окна могут открываться сразу при попадании на блог, могут открываться в середине просмотра, а могут появляться при закрытии страницы. Pop Up окна несут пользу хозяину сайта или блога, по сути, вынуждая читателя подписываться или переходить на продающую страницу. Естественно, всплывающие Pop Up окна раздражают посетителей таких ресурсов.

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

Предположим, что Ваш блог уже набрал вес, получил авторитет у поисковых систем, и Вы решили установить Pop Up окно на свой блог. Здесь есть два варианта – заказать установку Поп Ап окна на фрилансе, либо сделать эту работу самостоятельно. На фрилансе Вам сделают всё, но это стоит денег, но можно сделать такую работу и самостоятельно.

Создать Pop Up окно можно с помощью готового шаблона. Шаблон можно переделать до неузнаваемости, который будет нести нужную только Вам информацию, будет иметь нужный дизайн. Все это легко делается. Если Вы делали свои подписные страницы с помощью шаблонов, то здесь процесс очень похож. Но есть и отличие. Для создания поп ап окна, надо использовать бесплатный онлайн сервис Pop in Builder. Чтобы попасть на страницу указанного сервиса в поисковой строке браузера можно указать Pop in Builder. Либо зайти по этой ссылке http://popinbuilder.icoder.com/ сервис бесплатный и не требует регистрации.

Смысл работы заключается в следующем: сначала Вы берете шаблон, правите записи (его код) в обычном блокноте или NotePad++, закачиваете изображения на хостинг (на блог), далее редактируете Pop Up окно в сервисе Pop in Builder и получаете html код. Полученный код вставляете на блог. Вроде бы сложно, но это только кажется, на самом деле всё очень просто и легко. Конечно, сделать такую работу по моему описанию будет сложно, но Вы можете скачать бесплатный видео-урок, где все действия показаны в деталях. Скачать урок «Создание Pop Up окна на выходе со страницы» можно по ссылке.

Создать своё индивидуальное Pop Up окно Вы можете на своё усмотрение, отразить там нужную информацию, а по времени это займет час – полтора. Если Вы решили установить Поп Ап окно, то возьмитесь и сделайте.

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

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

В этом уроке мы создадим простое и красивое popup окно на jquery. Оно будет похоже на то, что используется в twitter. Естественно, вы сможете придать стиль, какой вам по душе.

• Мы хотим, чтобы оно центрировалось на странице сайта, при его выводе.
• Должна быть кнопочка «закрыть», или что-то подобное.
• Когда мы кликнем вне блока – popup окно закроется автоматически.
• Когда окно выведено, страница должна покрываться тенью, чтобы пользователь мог сфокусироваться.

Для реализации popup окна, мы будем использовать CSS и несколько строк jQuery кода, ну и само собой HTML. Заметьте, что для воплощения нашей идеи, не нужно никаких плагинов и дополнительных инструментов, все очень просто и надежно!

Click me X Some Title Goes Here: Some more content, for when you want to add a little bit more

Popup-box { position: absolute; border-radius: 5px; background: #fff; display: none; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); font-family: Arial, sans-serif; z-index: 9999999; font-size: 14px; } .popup-box .close { position: absolute; top: 0px; right: 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; cursor: pointer; color: #434343; padding: 20px; font-size: 20px; } .popup-box .close:hover { color: #000; } .popup-box h2 { padding: 0; margin: 0; font-size: 18px; } .popup-box .top { padding: 20px; } .popup-box .bottom { background: #eee; border-top: 1px solid #e5e5e5; padding: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #blackout { background: rgba(0,0,0,0.3); position: absolute; top: 0; overflow: hidden; z-index: 999999; left: 0; display: none; }

Мы определим некоторые другие CSS стили в JavaScript коде. Эти стили требуют дополнительных вычислений, поэтому лучше будет сделать это с помощью jQuery. Давайте перейдем к javascript коду.

Для начала, подключите jQuery файл библиотеки. После чего, инициализируем jQuery и добавляем div #blackout в тело документа. Также определяем ширину popup окна.

$(document).ready(function() { $("body").append(""); var boxWidth = 400;

Далее, создаем функцию, которая центрирует окно. Ранее мы установили absolute позиционирование в CSS, мы не можем использовать margin: 0px auto; нам необходимо определить ширину экрана, отнять от этого ширину popup окна, и все это разделить на 2. Высотой будет текущая позиция скролла, плюс где-то 150px.

Немного ранее мы создавали #blackout div, это для накрытия тенью контента страницы. Теперь нам нужно убедиться, что этот блок будет иметь ширину и высоту идентичную монитору. Это также рассчитывается в этой функции.

function centerBox() { /* определяем нужные данные */ var winWidth = $(window).width(); var winHeight = $(document).height(); var scrollPos = $(window).scrollTop(); /* Вычисляем позицию */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = scrollPos + 150; /* Добавляем стили к блокам */ $(".popup-box").css({"width" : boxWidth+"px", "left" : disWidth+"px", "top" : disHeight+"px"}); $("#blackout").css({"width" : winWidth+"px", "height" : winHeight+"px"}); return false; }

Эта функция должна запускаться 3 раза. Когда пользователь использует скроллинг, когда пользователь изменяет размер окна, также изначально, когда загружается страница.

$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();

В конце, нам нужно установить события кликов. Когда пользователь кликает в область вне окна, оно должно закрыться. Когда пользователь нажал на «X», окно также должно исчезнуть. В случае кликов внутри popup окна, ничего не должно происходить. В коде добавлены комментарии, чтобы проще было разобраться.

$("").click(function(e) { /* Предотвращаем действия по умолчанию */ e.preventDefault(); e.stopPropagation(); /* Получаем id (последний номер в имени класса ссылки) */ var name = $(this).attr("class"); var id = name; var scrollPos = $(window).scrollTop(); /* Корректный вывод popup окна, накрытие тенью, предотвращение скроллинга */ $("#popup-box-"+id).show(); $("#blackout").show(); $("html,body").css("overflow", "hidden"); /* Убираем баг в Firefox */ $("html").scrollTop(scrollPos); }); $("").click(function(e) { /* Предотвращаем работу ссылки, если она являеться нашим popup окном */ e.stopPropagation(); }); $("html").click(function() { var scrollPos = $(window).scrollTop(); /* Скрыть окно, когда кликаем вне его области */ $("").hide(); $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); }); $(".close").click(function() { var scrollPos = $(window).scrollTop(); /* Скрываем тень и окно, когда пользователь кликнул по X */ $("").hide(); $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); }); });

На этом, создание popup окна на jQuery завершено! Нам не нужно скачивать плагины и писать сложные функции, всего несколько строк кода. Вы можете скачать исходники и посмотреть, как это работает локально, на вашем компьютере.

Известный факт: большинство посетителей не совершают покупки при первом визите на товарную страницу интернет-магазина и даже не оставляют лиды — но как велико это большинство?

Согласно исследованиям компании SeeWhy, таковы 99% посетителей, впервые зашедших на ресурс. Конечно, речь идет в первую очередь о сайтах eCommerce, но все же возникает вопрос: если 99% посетителей ничего не покупают при первом визите, то как побудить их вернуться?

Хорошей новостью станет следующая статистика: 75% посетителей все же готовы возвратиться позже для завершения покупки.

Как бы вы не относились к popup окнам, эта маркетинговая технология все еще эффективна для привлечения внимания и сбора контактных данных (лидогенерации).

Проще говоря, используя popup окна, можно быстрее всего вернуть посетителя на лендинг.

Почему?

Это связано с методикой убеждения, известной как «прерывание паттерна» — когда ваше внимание, «усыпленное» определенным ритмом или последовательностью повествования, вдруг агрессивно привлекает что-то неожиданное. Вы часто испытываете этот эффект при просмотре фильмов, юмористических шоу и даже на важных переговорах.

Если говорить о контент- и email-маркетинге, то «прерывание паттерна» наиболее эффективно, когда читатель уже настроен на решение проблемы и продолжение взаимодействия (подписку на рассылку, покупку и т. д.).

Пример от сервиса Made.com. Маркетологи предложили своим посетителям бесплатный ваучер номиналом в 10 евро за сущий пустяк — адрес электронной почты. Это было сделано потому, что:

Согласно данным ExactTarget, электронная почта — наиболее предпочтительный для клиентов маркетинговый канал, ведь 77% потребителей предпочитают email другим каналам взаимодействия с брендом.

Возможно, всплывающие окна не так уж плохи?

Скорее всего, вы ненавидите pop-ups и имеете на это право. Еще бы, кому понравится сразу после перехода на лендинг видеть нечто подобное:

Или вот такое:

Вы можете даже не знать о сфере деятельности компании, а уже по шею засыпаны окнами pop up. Примеры выше — неудачные: прежде всего посетитель хочет узнать побольше о бренде, а потом уже скачивать «Бесплатное руководство по генерации трафика», «Бесплатную электронную книгу» и т. д. Разумеется, большинство пользователей ненавидят такие вещи и отвечают отказом от последующего взаимодействия с брендом.

Возможно, стоит немного остыть и посмотреть на результаты тестов. Что говорят цифры? Вот данные сплит-теста поп апа и кнопки «Нет, спасибо» на popup оффере.

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

1. Опыт использования всплывающих окон

За обычный день сервис WP Beginner получает около 70-80 новых подписчиков благодаря различным методам лидогенерации. Но чем больше подписная база, тем успешнее бизнес, поэтому маркетологи сервиса решились на ряд экспериментов с pop-ups.

Что было сделано?

Было разработано popup окно, появляющееся, когда пользователь намеревался покинуть сайт. Эффект был достигнут благодаря технологиям отслеживания курсора и прочим методам. Вот как выглядело окно:

Каковы результаты?

Использование всплывающего окна на важнейших страницах (не на всем сайте) повысило количество регистраций на 660%. То есть от 70-80 лидов сервис перешел к показателю в 445-470 лидов за сутки — скачок на качественно новый уровень.

Следующий кейс — от Backlinko. После добавления на лендинг СТА с предложением подписаться на рассылку, конверсия упала до 1.73% — необходимо было срочно что-то сделать. Маркетологи компании разработали popup окно, которое появлялось перед пользователями, решившими покинуть целевую страницу. Вот как оно выглядело:

Помните, что конверсия было около 1.7% до использования popup окна? Через 2 дня после запуска pop-up статистика изменилась. Всего за два дня коэффициент конверсии вырос с 1.73% до 4.83% — более чем в 2 раза!

Конечно, в мире, где один грамотный тест может повысить конверсию на 100, 300%, даже 1300%, результаты этого эксперимента выглядят скромно. Однако это не совсем так.

Прежде всего, имея крупную подписную базу, маркетологи могут создавать релевантный для своей аудитории контент и настраивать систему кросс-селлинга. Таким образом, учитывая допродажи и прочие факторы, один контакт приносит сервису в среднем 15$.

Если popup окна будут приводить по 15 дополнительных подписчиков в сутки, то ежедневный доход вырастет в среднем на $225, а годовой доход — на $82 125 соответственно. Неплохой заработок за 2 минуты проверки настроек, верно?

Очевидно, что ненавистники pop-ups были неправы. Но существуют и другие факторы: показатель отказов и влияние всплывающих окон на пользовательский опыт. Что насчет этого?

2. Как pop-ups влияют на пользовательский опыт и показатель отказов?

Одна из первых мыслей при упоминании pop-up — рост числа отказов, ведь все больше людей будут уходить с лендинга по вине всплывающего окна, что абсолютно логично. Однако, вспомним приведенные выше примеры: маркетологи WP Beginner не увидели колебания данного показателя, равно как и Backlinko — число отказов не изменилось в обоих случаях.

Дэн Зарелла (Dan Zarrella) пришел к такому же выводу после проведения серии тестов на своей личной целевой странице, выяснив, что присутствие всплывающего окна никак не влияет на показатель отказов. Единственное, что изменилось — убрав pop-ups, Дэн лишился 50% входящих лидов.

3. Что насчет пользовательского опыта?

Судя по всему, посетителям все равно. Маркетологи WP Beginner не получили ни одной жалобы на popup окна от своих клиентов.

Если задуматься, в этом есть смысл. Да, неприятно видеть подобное после перехода на ресурс по ссылке с Facebook:

Но это не повод в гневе покидать сайт. Что вы обычно делаете в подобных случаях? Верно — закрываете popup окно и продолжаете поиск нужного контента.

Более того, грамотное использование pop-ups способно повысить пользовательский опыт, по примеру сервиса Vero. Если вы зайдете главную страницу и в течение 30 секунд не предпримете никаких действий, то увидите в углу окно с текстом: «Что мешает вам подписаться на Vero прямо сейчас?».

4. Как уничтожить юзабилити с помощью всплывающих окон?

Однако вы не можете встроить в лендинг любое pop-up-объявление и надеяться на высокую конверсию. Если popup окно не выделяется на странице, то оно как минимум бесполезно.

Вы уже собираетесь уйти с лендинга, и тут… Бам! Произошло что-то непонятное, откуда в середине страницы появилась кнопка СТА? В действительности это popup окно наложилось на незатемненную страницу, слившись с фоном. Когда вы не отделяете pop-ups от остальной страницы, это сильно портит пользовательский опыт.

Как выяснилось, многие маркетологи заблуждаются насчет всплывающих окон — оказывается, они все еще работают. Сейчас вы узнаете, как использовать pop-ups на своем лендинге для достижения максимального эффекта.

5. Создание эффективных всплывающих окон

Прежде чем приступать к созданию pop-ups, рассмотрим их основные виды. Существует две крупных разновидности popup окон:

Оверлеи

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

Известный маркетолог Дэн Зарелла тоже использует оверлеи с затемнением фона, но само окно у него гораздо меньше обычного:

Окна, всплывающие в результате прокрутки страницы

Этот вид pop-ups появляется, когда пользователь прокручивает страницу до некоторого этапа — чаще всего данный формат используется в блогах, и он крайне эффективен. Пролистав половину страницы, вы увидите нечто подобное:

В зависимости от ПО или плагина, используемого вами, можно экспериментировать с глубиной прокрутки — как далеко надо зайти пользователю, чтобы увидеть всплывающее окно. Кроме того, вы можете задавать появление pop-ups по времени, проведенному пользователем на сайте.

К заголовкам, текстам полей и кнопок на всплывающих окнах применимы те же требования, что и к контенту на СТА. Ведь pop-ups и являются элементами призыва к действию, цель которых — увеличение просмотров/подписчиков/лидов.

6. Лучшее время для показа всплывающих окон

Если говорить о тестировании оверлеев, то сервис SumoMe собрал следующие данные: на сегодняшний день оптимальное время составляет 5 секунд после перехода посетителя на лендинг.

Сервис WhichTestWon дает другую статистику. В ходе тестов было проверено появление оверлеев на 15, 30 и 45 секунде после посадки пользователя, и оптимальный результат показал первый вариант: появление окна через 15 секунд на 11% эффективнее варианта с 30 секундами, и на 50% — варианта с 45 секундами после посадки.

Но помните — не существует идеального времени появления окна, ведь тесты необходимы в каждом конкретном случае. Это справедливо и для вопроса о частоте появления pop-ups. Проще говоря, статистика чужих ресурсов может мотивировать на собственное тестирование, но не должна быть объектом подражания — тестируйте.

У многих пользователей интернета термин «вплывающее окно » вызывает негативные ассоциации. Перед глазами сразу же «вплывает » картинка того, как при попытке просмотреть на сайте нужную информацию эта гадина закрывает нужный кусок текста. Что еще хуже, если пытаться закрыть его, пользователя зачастую вообще перекидывает на другой ресурс.

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

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

• Открывающиеся на переднем плане (pop-up ) – всплывают поверх основного;
• Открывающиеся на заднем плане (pop-under ) – открываются за основным окном.

Последние являются самыми коварными. Они становятся активными и видными для пользователя лишь после закрытия основного. Поэтому определить их источник и вовремя блокировать не удастся.

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

Основной программой для пользования интернетом являются браузер. Поэтому основной способ блокировки действия рекламных окон реализован именно в браузере:

• Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
• Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
• Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera . В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.

В современных браузерах система блокировки всплывающих окон настраивается через пользовательский интерфейс. В Хроме , как и в большинстве других браузеров, реализованы возможность включения или отключения блокировки, а также составления списка исключений (доверенных сайтов ):

В веб-программировании для создания всплывающих окон используется несколько технологий. Основным средством их создания пока остается javascript . В его функционале имеется несколько видов диалогов, действие которых похоже на действие всплывающих окон:

• Метод alert() – выводит на экран обычное текстовое сообщение. Чтобы скрыть диалог после прочтения, нужно нажать на кнопку «Ok » внизу окна;
• Метод confirm() – подобен предыдущему методу. Но выводимый им диалог кроме «Ok » снабжен еще и кнопкой «Cancel ». С их помощью пользователь может принять или отказаться от условия, указанного в окне;
• Метод prompt() – служит для вызова еще одной разновидности всплывающего окна javascript . В отличие от упомянутых выше это окно снабжено еще и текстовым полем. В него пользователь может вводить текстовые данные, которые можно присвоить значению нужной переменной.

Действие всех трех методов и вызываемые ими разновидности диалога показаны на изображении:

Но это всего лишь разновидности диалогов. Для создания настоящего всплывающего окна в javascript используется метод open() объекта window .

Вот полный синтаксис метода:

win = window. open (url, name, params) , где:

• url – это адрес страницы, которая откроется в новом окне;
• Name – имя созданного окна. Может быть использовано для дальнейшей обработки в формах (параметр target );
• Params – строка параметров для нового окна. Их полный список можно узнать самостоятельно из документации по javascript.

На изображении ниже показано действие метода и приведен упрощенный скрипт всплывающего окна:

Создается функция f1 , в теле которой реализован вызов метода window. open() . Затем идет вызов этого метода с одним параметром, указывающим адрес страницы, которая откроется в созданном окне. После этого вызывается метод setTimeout() . В качестве параметров ему передается функция f1 и интервал времени, через который откроется новое окно.

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

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

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

Также существует множество плагинов для популярных CMS . В их состав может входить целый набор окон. Дизайн и функционал каждого из них «заточен» под выполнение определенной задачи (регистрация, отправка сообщения и другое ).

Также существует несколько популярных скриптов. Пример одного из них будет приведен ниже. По такому принципу работают всплывающие окна в контакте и других популярных социальных сетях:

Как сделать всплывающее окно на Jquery $(document).ready(function(){ PopUpHide(); }); function PopUpShow(){ $("#window-popup").show(); } function PopUpHide(){ $("#window-popup").hide(); } .box { width: 400px; height: 300px; background-color: #ccc; margin:0px auto; padding:10px; font-size:40px; color: #fff; } .popup { width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .popup .popup-content { margin:40px auto 0px auto; width:200px; height: 80px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } Пример всплывающего окна
Показать попап Поздравляю вы сделали всплывающее окно!!! Скрыть попап

Код приведен в варианте «для ленивых ». Вставив его в любой редактор и запустив на выполнение, вы получите готовый пример всплывающего окна на основе jquery .