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


Содержание

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

Узнайте, как создавать всплывающие окна с CSS и JavaScript.

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

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

Пример

Шаг 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
to
>

Как сделать всплывающее окно с затемненным и прозрачным задним фоном на javascript?

Приветствую читателей! Конечно же картинка к данному посту практически не имеется отношения, разве что названия «объектов» одинаковые. Сегодня я расскажу как можно сделать всплывающее окно на javascript!

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

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

Как делаются такие окна?

Вообще, суть очень проста — окно само по себе — это обычный div блок, а задний фон — это еще один div черного (или какого-нибудь другого) цвета у которого задана прозрачность.

То есть изначально на странице уже размещены два (2) div блока, но они скрыты — у них установлены вот такие css свойства: display: none;

Соответственно, когда нам нужно сделать так, чтобы окошко «всплыло» (нажали на фотографию, на ссылку войти/регистрация, предложение подписаться и т.д. ), нужно просто изменить свойства двух этих блоков, соответственно на: display: block; Когда же нам нужно убрать это окно, мы просто снова меня стили — вот и все.

Делаем всплывающее окно

Мы сделаем небольшое окошко (400 на 400 пикселей) и поместим туда, для примера, картинку ipad’a, пару кнопочек, а также кнопку закрытия окна (крестик). А теперь взглянем на этот громадный код..

Вообще, большая ценность, на мой взгляд, содержится в css коде, ежели в коде javascript, потому что на подбор правильного фона, центрирование объектов на странице и внутри окна, уходит куда больше времени, чем на написание нескольких строчек javascript кода.

Функция show(state) отвечает за изменение стилей показа блоков, а параметр state непосредственно содержит значение стиля (либо block либо none). По щелчку на кнопке будет появляться окно на прозрачном фоне, чтобы закрыть его, нужно кликнуть либо на крестик либо на прозрачную область (на прозрачный div блок).

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

Дата последнего изменения: 2020-01-10 11:54:25

Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время

2020-01-13 / Вр:20:07 / просмотров: 11196

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

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

Итак, чтобы заработало всплывающее окно, пропишите в CSS вот такие стили:

HTML (Ссылки на вызов модальных окон):

HTML (модальное окно):

В строку №4 вставляете содержимое.

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

Итак, чтобы такого добиться, добавьте в CSS:

JS (тут без этого ни как):

Строка №17 – вы указываете в миллисекундах, когда должно появиться всплывающее окно. В моем случае это 5000 миллисекунд (5 секунд). Кстати, вам наверно будет интересно почитать статью про функцию setTimeout.

Это все, пользуйтесь на здоровье!
Ну и, естественно, не забывайте делиться с друзьями этой информацией!

Как избавиться от надоедливых всплывающих окон и уведомлений

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

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

Автовоспроизведение

Чтобы оградить себя от различных шумов, ты можешь отключить функцию автоматического воспроизведения видео. В последних версиях Хрома автозапуск отключается изначально, если это сайт, где пользователь часто просматривает видео и они его интересуют. Чтобы найти такую функцию на своем устройстве, в правом верхнем углу браузера заходи в меню, в правом верхнем углу выбери «Справка», а затем нажми «О Google Chrome».

Несмотря на такие меры, некоторые ролики с автовоспроизведением все же могут нарушить твой покой. Чтобы их заблокировать, придется настроить Хром. Открой новую вкладку и введи «chrome://flags» в адресную строку. Найди «Автовоспроизведение», там – параметр политики автозапуска с раскрывающимся списком рядом с ним. Проверь активацию документов и файлов, настройки. Так ты можешь убедиться, что видео не будет воспроизводиться без твоего желания.

Уведомления

Когда веб-сайт отправляет уведомление, Хром отображает его на экране. Это позволяет приложениям, таким как Gmail, связываться с тобой и уведомлять о новых сообщениях и новостях. В теории это отличная штука, но на практике это дает возможность всем сайтам отвлекать тебя своими уведомлениями и предупреждениями, хотя изначально они просят твое разрешение на это.

Если ранее ты не отказался от рассылки, то можешь сделать это потом. Вот каков алгоритм действий: открой новую вкладку и введи «chrome://settings/content/notifications». Убери верхнюю галочку, и нескончаемые уведомления оставят тебя в покое.

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

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

Если некоторые окна продолжают появляться, то установи стороннее разрешение, которое будет их блокировать. Одними из лучших являются «Popup Blocker Pro» и «Pop Up Blocker for Chrome».

Зачем нужны pop-up окна современным маркетологам?

Если вы застали Windows 95, то помните «мир без всплывающих окон». В те времена все было значительно проще — для спокойного серфинга достаточно было игнорировать рекламные баннеры.

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

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

Секрет популярности всплывающих окон

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

Согласно статистике, 96% посетителей никогда не вернутся на ваш ресурс. Это вовсе не значит, что им не понравился оффер: большинство людей просто забывают об его существовании или не помнят адрес сервиса. А вы сможете сразу вспомнить адрес нового, недавно посещенного вами сайта?

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

По этой причине вам совершенно необходим PopUp, так же как и вашим пользователям. У людей плохая память, а закладки теряются. Если всплывающее окно предложит посетителю подписаться на рассылку, то ему не придется запоминать ваш URL.

Так в чем проблема?

Илон Маск рекомендует:  Что такое код mb_ereg_search_regs

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

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

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

Виды всплывающих окон

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

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

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

Специалисты компании Fedora выяснили, что приветственное всплывающее окно позволило увеличить количество участников вебинара на 70%. Эта разновидность поп-апа является наилучшим способом передать пользователям ощущение срочности и неотложности.

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

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

Kissmetrics применяет «замаскированное» всплывающее окно: ненавязчивое и оформленное в виде электронного сообщения, этот Pop-Up предлагает подписаться на рассылку, как только вы пролистали практически всю страницу.

Как вариант, можно создать окно, содержащее ссылку на рекомендованный и релевантный контент. Компания Business2Community добавила такой поп-ап на свой ресурс:

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

Это не просто окна, которые всплывают, когда вы собираетесь покинуть страницу — они дают вам время расслабиться, усыпляют вашу бдительность, а затем БАЦ! :)

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

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

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

1 — Нет, спасибо, я ненавижу креатив!
2 — Нет, спасибо, я уже и так все знаю.
3 — Нет, спасибо, мне нравится есть вредную пищу.

Всплывающие окна exit-intent

Подобные pop-ups появляются, как только пользователь направляет курсор к кнопке «Назад» в браузере. Своего рода последняя попытка удержать посетителей до того, как они бесследно исчезнут на туманных просторах интернета.

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

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

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

Практические советы

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

1. Сформулируйте ясный и понятный призыв к действию. Дайте посетителям четкое представление о том, что они получат, выполнив вашу просьбу.

2. Сделайте так, чтобы поп-ап выделялся на общем фоне. Красный цвет лучше других привлекает внимание.

3. Помните о релевантности. Не используйте одно и то же всплывающее окно на каждой странице сайта. Попробуйте разные виды всплывающих окон (но не все сразу).

4. Добавьте триггер. Можно разместить промо-код или использовать слово «бесплатно». Вы должны сделать свое предложение стоящим.

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

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

Вместо заключения

Всплывающие окна — это не воплощение вселенского зла. На самом деле, они могут стать хорошим и полезным маркетинговым инструментом.

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

Dobrovoi Master

Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript

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

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

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

Разметка HTML

Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент

Модальное Окно!

Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.

Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.

Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.

Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1

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

Всплывающие окна на сайте: как заинтересовать ваших пользователей

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

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

И вот теперь вынуждены признать – мы были не правы. Не совсем правы, если быть точными. Инструмент эффективный и имеет место быть, но нужно уметь его правильно использовать. =)

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

Попап (Pop-Up) – когда при переходе на сайт баннер покрывает экран пользователя, и продолжить работу с сайтом можно только после его закрытия.


Попандер (Pop-Under) – когда при переходе на сайт появляется баннер, но не мешает посетителю взаимодействовать с сайтом.

Многие путают и называют все всплывающие окна попапами, но теперь-то вы знаете, что к чему, и не ошибетесь.

Для чего можно использовать:

  • проинформировать пользователя об акциях и спецпредложениях;
  • показать новый продукт или услугу;
  • предложить подписаться на рассылку;
  • выделить полезную функцию (если у вас сервис);
  • напомнить о товарах в корзине и т.д.

Основные элементы, которые должно содержать всплывающее окно:

  • заголовок;
  • текст – если предложение помещается в заголовок, то можно им и ограничиться;
  • призыв к действию – разместите его отдельно, либо отразите на кнопке;
  • изображение – по желанию можно ограничиться цветным фоном;
  • форма или кнопка со ссылкой на раздел/страницу – и не забудьте про условия обработки персональных данных;
  • кнопка закрытия формы – крестика в правом верхнем углу будет достаточно.

Пример всплывающего окна:

Рекомендации по контенту

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

1. Полезным. Скидка 5% или 100 рублей на баланс вряд ли кого-то привлекут, поэтому предлагайте интересные бонусы.

От такого предложения будет трудно отказаться:

2. Уместным. Не нужно в книжном разделе предлагать купить купальники или автозапчасти. Также сомнительно выводить всплывающее окно на Главной, когда пользователь только зашел на сайт. Дайте ему время изучить основную информацию, перейти на интересующую страницу.

Илон Маск рекомендует:  Что такое код asp logmoduleid

Хорошие варианты

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

Регистрация на сайте уместна, но пользователь только зашел на сайт и так агрессивно нападать на него не стоит:

Наша форма подписки, которая появляется внизу статьи:

3. Понятным. Кратко и прозрачно изложите суть предложения. Длинные сообщения и невнятные условия отталкивают. Обязательно укажите выгоду для клиента.

  • «Дарим 1 000 рублей за подписку на наши новости» + форма подписки.
  • «Скидка 20% на первый заказ» + форма регистрации.
  • «Посмотрите похожие товары со скидкой» + ссылка на соответствующий раздел.

Предложение слишком общее:

Пример лаконичного текста:

4. Визуально привлекательным. Анимацию лучше исключить, а на выбранные цвета должно быть приятно смотреть. От видео и музыки с автопроигрыванием тоже стоит отказаться, чтобы не пугать пользователя. Если используете изображения, то обязательно высокого качества. Также текст должен хорошо контрастировать с фоном.

Надпись внизу не сразу заметна:

Симпатично и по делу:

5. С возможностью отказаться. Кнопка «Закрыть» должна быть заметна и удобна для клика.

Кнопка закрытия не сразу заметна:

Заметная небольшая кнопка:

6. Ненавязчивым. Показывайте предложение каждому пользователю один раз. Можно повторять показ не чаще раза в неделю.

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

Слишком большой и яркий баннер, да еще второе окно ниже:

Тоже яркий, но ненавязчивый пример всплывающего окна на сайте:

Технические особенности

Добавить всплывающие окна на сайт можно:

  • С помощью HTML и JavaScript.
  • Применяя плагины для вашей CMS. Например, если у вас сайт на WordPress, то для него есть готовые плагины ITRO Popup Plugin, Optinmonster, YITH Newsletter Popup и др.
  • Используя готовые сервисы: Witget, PopMechanic, CartProtector и др.

Основные варианты настройки:

  • Показ окна после определенного времени. Оптимальное время – 30-90 секунд, когда пользователь уже изучил основную информацию на странице.
  • Сообщение для новых пользователей. Как и для предыдущего способа, лучше выждать немного времени, чтобы не отталкивать посетителя. Рекомендуем предлагать крупный бонус за регистрацию или первый заказ. Такой вариант особенно подойдет для Главной страницы.
  • Вывод окна после прокрутки до определенного места страницы. Хороший вариант для статьи, когда пользователь прочитал ее полностью, или для страницы каталога, когда пользователь дошел до конца списков товаров и ничего не выбрал. Можно показывать сообщение чуть раньше, после прокрутки 50-70% страницы.
  • Показ перед закрытием сайта. Когда курсор направляется в сторону закрытия вкладки, можно тоже показать всплывающее окно.
  • Сообщение для вернувшихся пользователей. Посетитель уже явно заинтересован в вашем продукте, поэтому почему бы не рассказать ему о дополнительных возможностях.

Еще совет: не пытайтесь обойти системы блокировки. Если клиент использует Adblock или другие блокировщики рекламы, то это его право.

Аналитика

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

Еще рекомендуем тестировать различные варианты, чтобы понять интересы вашей аудитории, например, можно предлагать разные бонусы за подписку. Рекомендуем инструмент от Google Analytics – «Эксперименты», но для настройки понадобится привлечь программистов.

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

Отношение поисковых систем

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

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

Google тоже сообщил, что нужно аккуратнее использовать всплывающие окна, особенно на мобильных. Попадают в зону риска баннеры на весь экран и те, что мешают изучению основной информации на сайте. Еще можно отметить рекомендации от Coalition for Better Ads, на которые ориентируется Google Chrome при блокировке рекламы.

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

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

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

Всплывающие окна: 10 проблемных тенденций и их альтернативы

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

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

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

1. Имеет ли пользователь возможность взаимодействовать с остальной частью страницы:

• Модальный попап: содержимое на странице недоступно для пользователя до тех пор, пока он не будет явно взаимодействовать с оверлеем.

• Немодальный попап: пользователи могут по-прежнему взаимодействовать с фоновым контентом (например, нажимая на ссылки или кнопки), пока наложение остается видимым.

2. Затемнён ли фон:

• Если фон затемнен, всплывающее окно называется лайтбоксом.

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

Хоть и во многих случаях лайтбоксы являются модальными, фактически, это не всегда так.

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

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

Распределение попапов: Не показывать до взаимодействий пользователя с сайтом или в процессе выполнения задач.

1. Отображение всплывающего окна до загрузки содержимого главной страницы: Независимо от используемого варианта, никогда не показывайте оверлей, пока пользователи не нашли необходимую для себя информацию на вашем веб-сайте или в приложении. Эта тенденция очень навязчива, потому что ещё до того, как попасть на страницу, пользователь видит раздражающее окно. Всплывающие окна, которые появляются перед загрузкой страницы, заставляют сайт выглядеть ужасным, а пользовательский интерфейс — безумным. Кроме того, сайты, которые игнорируют чрезмерное использование попапов, рискуют получить низкий рейтинг в результатах поисковых систем, поскольку Google наказывает сайты, которые используют методы, делающие контент менее доступным для пользователей, особенно на мобильных устройствах.

Какую же альтернативу использовать: дождитесь загрузки контента во всплывающем окне, пока оно не станет релевантным для пользователя. Используйте принцип взаимности: повысьте значимость своих посетителей, прежде чем спрашивать у них что-либо — будь то запрос адреса электронной почты или даже кнопка закрытия всплывающего окна. Запустите пользовательское тестирование, чтобы определить контекст, подходящий для любого контента, который вы планировали отобразить во всплывающем окне, и выяснить, как лучше всего отобразить этот контент; во многих случаях это не будет отображаться во всплывающем окне. Единственный случай использования, когда допустимо отображение любого вида всплывающего окна до загрузки содержимого страницы, — это когда ваш сайт юридически обязан запрашивать согласие пользователей на использование файлов cookie или проверку их возраста. (Хотя мы хотим, чтобы ЕС и другие регулирующие органы приняли менее раздражающее толкование GDPR и аналогичных правил.)

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

2. Отображение всплывающего окна сразу после входа пользователя: всплывающее окно, отображаемое сразу после входа пользователя, раздражает так же, как и попап, показанный перед загрузкой станицы. Если пользователь входит в учетную запись то, наверняка, это подразумевает выполнение ним каких-либо последующих действий — иначе зачем бы он вошёл в систему?! Немедленный показ всплывающего окна любого вида отвлечет и помешает пользователю выполнить необходимое ему действие. Поскольку он сосредоточен на следующем шаге, вероятно, он не будет обращать внимания на всплывающее окно или сразу же закроет его. Помимо этого, пользователь может быть раздражённым из-за прерывания его действий и потраченного времени, необходимым для закрытия всплывающего окна или его перемещения.

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

Илон Маск рекомендует:  Разрабатываем парсер математических выражений

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

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

Например, веб-сайт Uncommon Goods, на который попал один из пользователей, вызвал недовольство, когда его встретило модальное наложение с просьбой, ввести свой адрес электронной почты дабы получить доступ к секретным предложениям. Он сказал: «Меня действительно раздражает, когда появляются подобные вещи, прежде чем я могу что-то сделать на сайте. Откуда им знать, хочу ли я становиться их подписчиком, если я только что пришел сюда? Было бы лучше, появись это сообщение чуть позже».

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

Что делать вместо этого: вместо того, чтобы незамедлительно показывать всплывающие сообщения по запросу электронной почты, подумайте, когда пользователям может быть наиболее удобно делиться своими адресами электронной почты с вами. Они просматривают категорию, в которой есть соответствующий промокод? Или, может быть, они только что дочитали (или просмотрели) до конца весь пост в блоге. Эти действия могут быть подходящими триггерами для минимально навязчивого немодального наложения, которое может отображаться близко к верхнему или нижнему правому углу, и разумно использовать экранное пространство. Предложите пользователям что-то ценное и осязаемое в обмен на их адрес электронной почты.

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

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

Получение значимого фидбека в определённые моменты дает развёрнутое представление о проблемах, с которыми столкнулись пользователи. Но если вы будете просить об обратной связи слишком рано то рискуете попросту не получить ее, когда это будет необходимо. Например, пытаясь оплатить телефонный счет на ATT.com, участница исследования была разочарована формой обратной связи, которая появилась сразу же после того, как она попала на страницу своего счёта. Она сказала: «Ну, я бы ответила после того, как оплатила счет, но теперь я расстроена, что я ничего не сделала, чтобы дать отзыв».

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

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

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

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

Приложение United отображало модальное наложение прямо во время выполнения важной задачи: получения посадочного талона.

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

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

British Airways показывает кнопку обратной связи на правой стороне всех своих страниц.

6. Отображение нескольких всплывающих окон одно за другим: Отображение нескольких всплывающих окон друг над другом делает ваш сайт непрофессиональным, ужасным и неорганизованным. Это сбивает пользователей с толку и заставляет их прилагать определённые усилия, чтобы закрыть каждое из них. Если на вашем сайте используется много разных типов всплывающих окон, протестируйте реализацию, чтобы не показывать пользователям несколько всплывающих окон одновременно.

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

В конце оформления заказа Lulus показал несколько окон обратной связи одновременно. Лучшим подходом было бы показывать только по одному за раз или разместить форму обратной связи на странице подтверждения.

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

Всплывающие контекстные окна: не препятствуйте переходам или доступу к контенту.

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

Во время одной из наших сессий юзабилити-тестирования участник, который искал работу на веб-сайте HSBC, столкнулся с двумя различными переходными окнами при попытке выполнить задачу, которая была в разделена на 3 отдельных веб-сайта. Он сказал: «Ух ты, меня всё ещё продолжают уводить на другие сайты, я даже не знаю, где я нахожусь. Если их процесс приема на работу является таким сложным и разрозненным, я, честно говоря, не думаю, что это стало бы хорошим местом работы. Это, скорее, похоже на бардак, и не зависит от того, как хорошо выглядит этот сайт ».

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

Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery

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

Хочу сказать что эти плагины сейчас стали довольно популярными. Естественно — очень удобно, красиво и современно. Но найти то что нужно, оказывается, не так то уж и просто. И вот с огромной надеждой, что Вы найдёте себе что нужно, представляю Вам эту бесплатную подборку с этими замечательными JQuery плагинами.

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

Как сделать модальное окно на css

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

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

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

Кто-то делает для этих целей модальное окно при открытии страницы, которое появляется на странице через определенный промежуток времени используя разумеется java скрипт, а другой хочет разными способами оставить посетителя на своём сайте и использует модальное окно при закрытии страницы, которое всплывает в тот момент, когда клиент хочет уже покинуть и закрыть страницу.

Первый пример всплывающего модального окна.

Заголовок модального окна

Здесь прописана текстовая информация модального окна .

Скопируйте, вставьте и сохраните вышеуказанный код в текстовый документ под именем index.html и после откройте его в браузере для проверки работоспособности модального окна. Здесь же вы можете и подкорректировать внешний вид модального окна исходя из дизайна вашего проекта.

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

Модальное окно при нажатии на кнопку

В этом примере я покажу как прописать кнопку для открытия модального окна.
Для этого нам нужно лишь добавить в коде для кнопки и для блока модального окна атрибут HTML onclick и тем самым вызвать функцию с определённым именем.

Здесь же я добавил для модального окна в стилевом оформление плавное появление и закрытие окна, изменив вместо обычного display на параметры: visible и opacity .

Пример кнопки для вызова модального окна ( нажмите ).

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL