HTML: Создаем свое PopUp окно
Как сделать всплывающее (pop-up) окно – вопрос, который будоражит ум любого молодого начинающего программиста. И сегодня мы рассмотрим, как сделать данное всплывающее окно. Сразу немного забегу вперед, ибо то, что мы сделаем будет поистине очень и очень интересным и функциональным.
Итак, делать мы будем похожее окно, которое я реализовал на сайте одного из моих заказчиков. Посмотреть можно . Огромное преимущество данного метода создания такого окна заключается в том, что мы не будем использовать JavaScript, а ограничимся исключительно моим любимым CSS3 и HTML5. Этим самым мы убьем сразу несколько зайцев. Во-первых, облегчим загрузку нашего сайта, во-вторых, реализуем все в удобном и легком виде с минимальным использованием кода, что позволит Вам самостоятельно придать Вашему всплывающему окну любые размеры, цвета, формы. Я думаю – это здорово. Итак, приступим.
Представьте, у Вас уже есть сайт и Вы хотите, где-то внедрить кнопку, например, “регистрация” или “онлайн заявка”. И Вы хотите, чтобы пользователь, нажав на эту кнопку, увидел окошко небольшого размера, которое позволяет ввести в него какие-то данные, а затем отправить их администратору сайта. Вот такое вот окно мы с Вами и будем сейчас делать.
Для начала мы создадим эту кнопку, я думаю, Вы и без особого труда это сделаете. Но в тег Вы должны вписать следующее #openModal. Вот так это должно примерно выглядеть и у Вас. Далее, перед закрывающим тегом пишем код, который указан ниже. Учтите, что для оформления мы будем использовать классы, а для вызова окна id. Следуя из этого правила, мы можем создать бесчисленное множество различных всплывающих окон.
X Всплывающее окно
Это окно создано одним из самых простых способов. Ничего личного, все просто:)
Теперь нам нужно красиво все оформить и сделать так, чтобы все работало как нужно. Начнем оформлять.
ОформлениеModalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }
ModalDialog { position : fixed ; font - family : Arial , Helvetica , sans - serif ; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; background : rgba (0 , 0 , 0 , 0.8 ) ; z - index : 99999 ; Webkit - transition : opacity 400ms ease - in ; Moz - transition : opacity 400ms ease - in ; transition : opacity 400ms ease - in ; display : none ; pointer - events : none ; |
Приведенный выше код прост до безобразия. Но на всякий случай, так как я знаю, что мой блог читает достаточно много новичков разберу возможные сложности. Чтобы окно всегда была на одном месте я ему задал фиксированное положение. Также, чтобы окно растягивалось на весь экран я задал координаты углов в точку 0. Для заднего фона установлен черный цвет и добавлена прозрачность, таким образом достигается затемнение вокруг модального окна. Чтобы окно было по верх остальных элементов страницы, установлен большой z-index . Для плавного появления и исчезновения нашего любимого модального окошка, а оно таким станет, поверьте мне, transition . Чтобы спрятать окно необходимо установить display в none . Свойство pointer-events позволяет контролировать интерактивность (кликабельность) элементов.
Открытие всплывающего окнаМы сделали оформление нашего окна. Но! Оно же, Вы скажете мне, не работает. Да, отвечаю я, это так. Ибо теперь самое интересное. В CSS3 появился псевдокласс target, поистине полезная штука, что ни говори. И в нашем модальном всплывающем окне без него вообще никак. Что оно делает. Данный псевдокласс, если его указать с каким-то элементом, который определен в адресной строке как id, в нашем случае это #openModal. То, свойства этого псевдокласса станут более важными, чем у целевого элемента. Я думаю, Вы уже поняли, что я хочу сделать.
ModalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }
ModalDialog : target { display : block ; pointer - events : auto ; ModalDialog > div { width : 400px ; position : relative ; margin : 10 % auto ; padding : 5px 20px 13px 20px ; border - radius : 10px ; background : #fff; background : - moz - linear - gradient (#fff, #999); background : - webkit - linear - gradient (#fff, #999); background : - o - linear - gradient (#fff, #999); |
Псевдо-класс target
устанавливает DISPLAY в BLOCK и таким образом происходит всплытие окна. Свойство POINTER-EVENTS управляет активностью ссылки.
Свойства DIV устанавливает ширину окна, его положение на экране и отступы для установки окна в центр страницы. Остальные свойства задают поля внутри страницы, скругление углов и фон окна с градиентов от белого до темно-серого.
Когда задано оформление окна и оно открывается, необходимо сделать кнопку закрытия окна – оформить ее и реализовать функциональность. Использование CSS3 и HTML5 позволяет создавать стильные нестандартные кнопки, не используя при этом изображения:
Close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
Close { background : #606061; |
Известный факт: большинство посетителей не совершают покупки при первом визите на товарную страницу интернет-магазина и даже не оставляют лиды — но как велико это большинство?
Согласно исследованиям компании SeeWhy, таковы 99% посетителей, впервые зашедших на ресурс. Конечно, речь идет в первую очередь о сайтах eCommerce, но все же возникает вопрос: если 99% посетителей ничего не покупают при первом визите, то как побудить их вернуться?
Хорошей новостью станет следующая статистика: 75% посетителей все же готовы возвратиться позже для завершения покупки.
Как бы вы не относились к popup окнам, эта маркетинговая технология все еще эффективна для привлечения внимания и сбора контактных данных (лидогенерации).
Проще говоря, используя popup окна, можно быстрее всего вернуть посетителя на лендинг.
Почему?
Это связано с методикой убеждения, известной как «прерывание паттерна» — когда ваше внимание, «усыпленное» определенным ритмом или последовательностью повествования, вдруг агрессивно привлекает что-то неожиданное. Вы часто испытываете этот эффект при просмотре фильмов, юмористических шоу и даже на важных переговорах.
Если говорить о контент- и email-маркетинге, то «прерывание паттерна» наиболее эффективно, когда читатель уже настроен на решение проблемы и продолжение взаимодействия (подписку на рассылку, покупку и т. д.).
Пример от сервиса Made.com. Маркетологи предложили своим посетителям бесплатный ваучер номиналом в 10 евро за сущий пустяк — адрес электронной почты. Это было сделано потому, что:
Согласно данным ExactTarget, электронная почта — наиболее предпочтительный для клиентов маркетинговый канал, ведь 77% потребителей предпочитают email другим каналам взаимодействия с брендом.
Возможно, всплывающие окна не так уж плохи?
Скорее всего, вы ненавидите pop-ups и имеете на это право. Еще бы, кому понравится сразу после перехода на лендинг видеть нечто подобное:
Или вот такое:
Вы можете даже не знать о сфере деятельности компании, а уже по шею засыпаны окнами pop up. Примеры выше — неудачные: прежде всего посетитель хочет узнать побольше о бренде, а потом уже скачивать «Бесплатное руководство по генерации трафика», «Бесплатную электронную книгу» и т. д. Разумеется, большинство пользователей ненавидят такие вещи и отвечают отказом от последующего взаимодействия с брендом.
Возможно, стоит немного остыть и посмотреть на результаты тестов. Что говорят цифры? Вот данные сплит-теста поп апа и кнопки «Нет, спасибо» на popup оффере.
| Текст | Количество просмотров | Количество собранных email | Коэффициент конверсии |
| Нет, спасибо. Я предпочитаю платить полную стоимость | 165 416 | 9928 | 6,0% |
| Мне это неинтересно | 165 625 | 7961 | 4,81% |
| Нет, спасибо | 165 021 | 7616 | 4,62% |
| Нет | 166 072 | 7433 | 4,48% |
Впечатляет? Тогда посмотрим на результаты компаний, эффективно использующих такой подход.
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. Проще говоря, статистика чужих ресурсов может мотивировать на собственное тестирование, но не должна быть объектом подражания — тестируйте.
Внешние 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 код popup окнаДля начала, подключите 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 завершено! Нам не нужно скачивать плагины и писать сложные функции, всего несколько строк кода. Вы можете скачать исходники и посмотреть, как это работает локально, на вашем компьютере.
3. Пример модального окна jQuery, вызванного по ссылке (с Демо)
Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.
Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появлятьсяjQuery код
$(document).ready(function()
{
alert("Текст во всплывающем окне");
});
Код вставляете в любое место в body
Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:
А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:
$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});
Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу
Для начала напишем html-часть . Этот код размещаем в body Вашего документа.
Вызов модального окна
Текст модального окна
Закрыть
Текст в модальном окне.
Код CSS . Либо в отдельном css-файле, либо в в head.
body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}
В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.
Внимание! Не забываем подключить библиотеку в head документа!
Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.
Код jQuery
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});
