Создаем собственное всплывающее окно на javascript, css и jquery. какой способ выбрать?

Примеры эффективных и неэффективных всплывающих окон

Для наглядности предлагаем взглянуть плохие и хорошие примеры всплывающих окон.

Хороший пример. Без сомнения, ими могут похвастаться онлайн-магазины Quelle и Lamoda. На страницах появляются баннеры со специальными предложениями.

Плохой пример. Инструмент, называемый CallBackHunter или «Мы вам перезвоним». Когда он только появился в Рунете, то произвел эффект разорвавшейся бомбы, ведь покупатели еще не привыкли к такому сервису: клиенту больше не надо тратить деньги на звонок, чтобы узнать интересующую информацию. Достаточно лишь указать свой номер и дождаться входящего звонка. Такая мера поначалу серьезно повлияла на конверсию сайтов, но спустя совсем немного времени инструмент начал вызывать раздражение. И виной тому, прежде всего, неправильная настройка. Баннер появляется через считанные секунды после перехода на сайт, когда посетитель даже не уверен, по нужному ли он попал адресу. Да и формулировка заголовка и основного текста оставляет желать лучшего.

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

Постоянно открывается окно поиска что делать

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

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

Давайте разберемся почему так происходит.

Разумеется, одной из самых распространенных причин внезапного открывания любых окон, в том числе окна поиска, является залипшая клавиша на вашей клавиатуре. Внимательно осмотрите клавиатуру, быть может на нее случайно свалилась какая-либо папка. Залипание часто может быть из-за того, что в клавиатуру попала канцелярская скрепка или когда-то вы разлили на клавиатуру что-нибудь липкой и оно дало о себе знать. Если можете, то разберите клавиатуру и произведите ее полную чистку. Даже если дело окажется не в клавиатуре, лишним это скорее всего не будет.

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

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

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

Параметры конфигурации

Создание всплывающих окон

Шаг 1) добавить HTML:

<div class=»popup» onclick=»myFunction()»>Click me!  <span class=»popuptext»
id=»myPopup»>Popup text…</span></div>

Шаг 2) добавить CSS:

/* Popup container */.popup {   
position: relative;    display: inline-block;   
cursor: pointer;}/* The actual popup (appears on top)
*/.popup .popuptext
{    visibility: hidden;    width:
160px;    background-color: #555;   
color: #fff;    text-align: center;   
border-radius: 6px;    padding: 8px 0;   
position: absolute;    z-index: 1;   
bottom: 125%;    left: 50%;   
margin-left: -80px;}/* Popup arrow */.popup .popuptext::after {   
content: «»;    position: absolute;   
top: 100%;    left: 50%;   
margin-left: -5px;    border-width: 5px;   
border-style: solid;    border-color: #555 transparent
transparent transparent;}/*
Toggle this class when clicking on the popup container (hide and show the
popup) */.popup .show {   
visibility: visible;    -webkit-animation:
fadeIn 1s;    animation: fadeIn 1s}/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {    from {opacity: 0;}     to {opacity: 1;}}@keyframes fadeIn {    from {opacity: 0;}   
to {opacity:1 ;}}

Шаг 3) добавить JavaScript:

<script>// When the user clicks on <div>, open the popupfunction
myFunction() {    var popup = document.getElementById(«myPopup»);   
popup.classList.toggle(«show»);}</script>

Известные проблемы

• Users of the Translate extension should note that Page Previews requests previews in the content language of the page. If the preview contains a complete translatable block, then it will be translated. If, however, the preview contains an incomplete translateable block – because a sentence is cut off, say – then it isn’t translated and will be displayed in the content language of the page. If you are observing this behavior, then you should consider marking up individual sentences in your lead section. T167852 is for a technical audience but has more information on the underlying problem.
• Longer math formulas cutting off in preview — long math or chemical formulas (formulas wider than the preview width) display as truncated in previews. We were not able to add a gradient in order to indicate that the formula is continued on the article itself.

Закрытие всплывающего окна.

Теперь нам нужно написать функцию, которая закроет и подложку, и pop-up.
В самом начале скрипта мы создали коллекцию элементов , клики по которым закроют всплывающее окно. Для этого необходимо повесить обработчик события на каждый элемент. Мы опять воспользуемся методами и . Если событие наступило, то вызывается функция .

JavaScript

for (let el of mClose) {
el.addEventListener(‘click’, modalClose);
}

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

JavaScript

document.addEventListener(‘keydown’, modalClose);

Наконец настало время разобраться с работой функции . Сама по себе функция не сложная и напоминает функцию . Основное отличие между ними в том, что код функции находится внутри условия:

JavaScript

if (mStatus && ( !event.keyCode || event.keyCode === 27 ) ) { … }

Код функции начнёт выполняться, если есть открытое всплывающее окно (вот зачем нам был нужен флаг ) и нет события нажатия клавиши или нажата клавиша (её код — 27).

JavaScript

function modalClose(event) {
if (mStatus && ( event.type != ‘keydown’ || event.keyCode === 27 ) ) {
// обходим по очереди каждый элемент коллекции modals (каждое всплывающее окно)
// и в зависимости от типа анимации, используемой на данной странице,
// удаляем класс анимации открытия окна и добавляем класс анимации закрытия
for (let modal of modals) {
if (typeAnimate == ‘fade’) {
modal.classList.remove(‘fadeIn’);
modal.classList.add(‘fadeOut’);
} else if (typeAnimate == ‘slide’) {
modal.classList.remove(‘slideInDown’);
modal.classList.add(‘slideOutUp’);
}
}

// закрываем overlay
overlay.classList.remove(‘fadeIn’);
overlay.classList.add(‘fadeOut’);
// сбрасываем флаг, устанавливая его значение в ‘false’
// это значение указывает нам, что на странице нет открытых
// всплывающих окон
mStatus = false;
}
}

Мы разобрались как открыть и закрыть красивое всплывающее окно с помощью анимации основанной на CSS3. Хочу добавить только, что по такому же принципу можно сделать появления pop-up из-за нижней или боковой границы окна браузера.

← Валидация формы обратной связи.

Таймер обратного отсчёта →

Комментарии

Всего: 5 комментариев

Требования при посте комментариев:

1. Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
   Комментарии содержащие обсуждение политики, будут безжалостно удаляться.
2. Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега :
   — — HTML;
   — — CSS;
   — — JavaScript.
3. Если что-то не понятно в статье, постарайтесь указать более конкретно, что именно не понятно.

Всё дело — в CSS

Чтобы компьютер понимал, какие элементы есть на странице, используют язык HTML, который говорит: «Тут заголовок, тут ссылка, тут обычный текст, тут картинка». А чтобы было ясно, как эти элементы должны выглядеть и работать, используют специальные правила — их называют стилями. Стили задают цвет и внешний вид всего, что есть на странице, а ещё управляют размером и поведением каждого элемента. 

Стили хранятся в таблицах, таблицы называют каскадными, всё вместе называется CSS — cascading style sheets. 

Вот больше примеров и практики по CSS:

• Самое простое и полезное введение в CSS.
• На стиле — подборка интересных CSS-свойств.
• 10 полезных инструментов для создания роскошного CSS.

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

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Блок через настройки браузера

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

Для этого выполняют следующие действия:

1. Нажимают на значок, имеющий вид 3 горизонтальных полос в правой верхней части окна. Открывают меню настроек.
2. Пролистывают список до появления кнопки «Дополнительные настройки». Нажимают на этот элемент управления.
3. Выбирают пункт «Личные данные». В этом разделе должны быть включены такие настройки: «Блокировать всплывающие окна с рекламой», «Уведомлять пользователя при вводе данных банковских карт на сомнительных сайтах», «Защищать от установки вредоносных программ».
4. Возле названия блока находят другой пункт — «Настройка содержимого». Запускают его, переходят во вкладку «Всплывающие окна». Здесь необходимо активировать функцию блокировки.

Как оставить исключения для некоторых сайтов

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

Для этого используют опцию «Управление исключениями». Откроется панель настроек, где прописывают адрес сайта, сообщения которого должны отображаться. Выбирают вариант «Разрешить», подтверждают действие.

Если способ не сработал

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

Список дополнений в Яндекс браузере.

Для этого выполняют следующие действия:

1. Открывают меню веб-обозревателя. Выбирают пункт «Дополнения».
2. Пролистывают станицу с помощью колеса прокрутки до появления надписи «Безопасность». Здесь присутствуют расширения, способные запретить загрузку большей части нежелательного контента. Для активации передвигают расположенные рядом ползунки.

Чтобы понимать, как отключить уведомления в Яндекс Браузере, стоит разобраться в принципах действия плагинов:

1. Антишок используется для блокирования сайтов с контентом, способным шокировать (фото и видео порнографического содержания, рекламой секс-шопов, сценами насилия, продвижением интим-услуг).
2. Блокировщик флеш-данных необходим для прекращения воспроизведения игровых и видеовставок, созданных при поддержке Adobe Flash Player. Они появляются на информационных сайтах, мешая изучению полезного контента.
3. Adguard считается самым эффективным средством устранения рекламных объявлений на веб-страницах. Блокирует более 90% баннеров, роликов и текстовых уведомлений.

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

Эту проблему решают с помощью системных средств Windows:

1. Открывают пусковое меню, находят «Панель управления». Появится список функций.
2. В верхней части окна находят кнопку изменения способа просмотра. Выбирают вариант «Значки».
3. Находят раздел «Свойства браузера». В новом окне появится вкладка «Подключение». Здесь нажимают на клавишу «Настройка сети».
4. Очищают адресные строки. Выбирают вариант автоматического определения параметров.

Основные причины, по которым pop-up не работает

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

Примерно треть гостей на сайты заходят через мобильные устройства. Если не адаптировать баннер под электронные гаджеты, то он будет некрасиво растягивать экран или вовсе отображаться некорректно. Обязательно нужно проверить функциональность pop-up как в браузерной, так и в мобильной версиях сайта.

«Тяжелые» плагины не позволяют быстро загрузить страницу

Каждая новая надстройка замедляет работу сайта. Если страница медленная, то посетители не захотят ждать ее загрузки. Проверить скорость работы вашего ресурса можно с помощью сервисов Sitespeed.ru или PageSpeed Insights, а при необходимости провести работы по ускорению сайта.

Кроме того, некоторые плагины могут вступать в конфликт друг с другом, деформируя вид страницы со всплывающим окном

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

Всплывающее окно имеет некачественный дизайн

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

Важно сделать действительно удобную страницу для посетителей.

Текст для всплывающего окна неуникален

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

Используется нерелевантный контент

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

Пошаговая инструкция, как удалить всплывающие окна в Хроме, Файрфоксе и Интернет эксплорере

Следующая инструкция — это пошаговое руководство, которое нужно выполнять шаг за шагом. Если у вас что-либо не получается, то ОСТАНОВИТЕСЬ, запросите помощь написав комментарий к этой статье или создав новую тему на нашем форуме.

1. Удалить всплывающие окна, деинсталлировав неизвестные и вызывающие подозрение программы 2. Удалить всплывающие окна в Chrome, Firefox и Internet Explorer, используя AdwCleaner 3. Удалить всплывающие окна, используя Malwarebytes Anti-malware 4. Удалить всплывающие окна в Chrome, сбросив настройки браузера 5. Удалить всплывающие окна в Firefox, сбросив настройки браузера 6. Удалить всплывающие окна в Internet Explorer, сбросив настройки браузера 7. Заблокировать появление всплывающих окон и рекламы

Если вы используете компьютер Apple под управлением Mac OS X, то воспользуйтесь следующей инструкцией Как удалить вирус, всплывающие окна и рекламу в Mac OS X

Удалить всплывающие окна, деинсталлировав неизвестные и вызывающие подозрение программы

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

Работа с jQuery

Ну вот мы и добрались до библиотеки js – jQuery. Для реализации описываемого подхода я написал две функции на jq, которые отвечают за появление окна и за его закрытие.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!DOCTYPE>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
/*открываю попап*/
$(document).ready(function() { 
	$('a#start').click( function(event){ 
		event.preventDefault(); 
		$('#overlay').fadeIn(250, 
		 	function(){
				$('#popUp') 
					.css('display', 'block') 
					.animate({opacity: 1, top: '55%'}, 490); 
		});
	});
/*по нажатию на крестик закрываю окно*/
	$('#close, #overlay').click( function(){ 
		$('#popUp')
			.animate({opacity: 0, top: '35%'}, 490, 
				function(){ 
					$(this).css('display', 'none'); 
					$('#overlay').fadeOut(220); 
				}
			);
	});
});
</script>
<style>
#popUp {
        top: 12%; 
	left: 50%; 
	height: 200px;
	position: fixed;
	width: 300px;  
	border-radius: 11px;
	background: #fef; 
	margin-left: -150px;	
	margin-top: -100px;
	display: none; 
	opacity: 0;
	padding: 17px;
	z-index: 6;
}
#popUp #close {
cursor: pointer;
	position: absolute;
	width: 23px;
	height: 23px;
	top: 17px;
	right: 17px;
	display: block;
}
#overlay {
	z-index:4; 
	background-color:#010; 
	position:fixed; 
	opacity:0.86;
	width:100%; 
	height:100%;
	display:none; 
	top:0;
	left:0;
}
</style>
</head>
<body>
<a href="#" id="start">Нажми на ссылку</a>
<div id="popUp">
      <span id="close">X</span>
      <h1>Какое-то предложение!</h1>
</div>
<div id="overlay"></div>
</body>
</html>

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

Примеры качественных всплывающих окон

Отличный вариант – предложить купон на скидку в обмен на адрес электронной почты. Как правило, такие предложения ограничены по времени. Их цель – мотивировать человека совершить покупку как можно скорее. Скидка чаще всего не превышает 15-20 %. Все детали акции во всплывающем окне не указываются, чтобы не перегружать его информацией и представить предложение в наиболее выгодном ракурсе.

BAON

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

FiNN FLARE

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

Qlean.ru

Сайт Qlean.ru творчески подошёл к оформлению всплывающего окна. Скидка предоставляется на первую уборку в квартире. За это нужно поделиться номером телефона потенциального клиента.

Советы по созданию идеального инструмента поп-ап

Уважайте посетителя. Не держите гостей сайта за дураков, не грубите и не фамильярничайте при оформлении всплывающего окна. 
Качество не должно быть в ущерб количеству. Нельзя перегружать страницы сайта огромным количеством поп-ап окон плохого качества. Пусть их будет немного, но они окажутся эффективными.
Окно должно быть размещено к месту и ко времени. Мгновенная загрузка всплывающего баннера в большинстве случаев приводит к закрытию страницы. Если вы не хотите потерять клиентов, постарайтесь оформить появление окна к моменту, когда посетитель уже захочет закрыть сайт. Подобрать оптимальное время поможет внимательное изучение поведения пользователей на странице.
Кнопка закрытия всплывающего баннера должна быть заметна, иначе у пользователя сложится мнение, что им пытаются манипулировать. 
Старайтесь не быть назойливы. Сюрпризы не всегда нравятся людям, особенно если они мешают им достичь желаемой цели

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

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

Пишем JavaScript для управления всплывающими окнами с помощью CSS3.

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

JavaScript

;(function() {
‘use strict’;

})();

Первым делом, что нам нужно сделать — это объявить несколько констант и переменных, очень важных для нормального функционирования скрипта и присвоить им значения.

JavaScript

// коллекция всех элементов на странице, которые могут открывать всплывающие окна
// их отличительной особенность является наличие атрибута »
const mOpen = document.querySelectorAll(»);
// если нет элементов управления всплывающими окнами, прекращаем работу скрипта
if (mOpen.length == 0) return;

// подложка под всплывающее окно
const overlay = document.querySelector(‘.overlay’),
// коллекция всплывающих окон
modals = document.querySelectorAll(‘.dlg-modal’),
// коллекция всех элементов на странице, которые могут
// закрывать всплывающие окна
// их отличительной особенность является наличие атрибута »
mClose = document.querySelectorAll(»);
// флаг всплывающего окна: false — окно закрыто, true — открыто
let mStatus = false;

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Виды поп-апов

Маркетологи действительно активно пользуется этим инструментом для абсолютно разных целей, поэтому адаптировали его внешний вид, время и способ возникновения. Сегодня в интернет-маркетинге 5 самых популярных всплывающих окон.

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

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

Pop Up, всплывающий во время прокрутки страницы

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

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

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

Окно, всплывающее в заданное время 

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

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

Возникновение окна именно на 5 секунде стимулирует наибольшее количество покупок

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

Поэтому мы бы советовали не запускать поп-ап на 1-3 секунде посещения сайта. Ведь это не принесет желаемого результата.

Всплывающие окна с вопросом

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

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

Окно, всплывающее при выходе с сайта

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