Чем отличается модальное окно от попапа
Перейти к содержимому

Чем отличается модальное окно от попапа

  • автор:

Модальные окна / popup

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

На всякий случай поясню, что под модальными (popup) окнами понимаются слои, которыенакладываются на все остальные и требуют какого-либо действия от пользователя — что-то ввести, что-то подтвердить или отклонить и т.д. Тоесть функционально это либо «отдельное окно» внутри основного окна или alert\confirm окно.

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

В общем виде html-код страницы с popup_ом будет иметь вид:

popup

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

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

/*Затемнение */ .overflow < background: rgba(0, 0, 0, 0.7); position:fixed; top: 0px;bottom: 0px; left: 0px;right: 0px; z-index:100; display:none; >/* модальное окно */ .popup < position:absolute; z-index:101; background: #ffffff; width: 600px; min-height: 300px; margin-left: -300px; top: 10%; left: 50%; display:none; >.popup .close < position:absolute; top: 10px; right: 10px; display:block; width: 17px; height: 17px; opacity: 0.5; background: url(../img/close.png) no-repeat center; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; transition:opacity 0.5s; >.popup .close:hover

А теперь давайте приступим к обработке событий открытия и закрытия нашего окна:

var win_top = 0; $(document).ready(function()< // открываем модальное окно при клике по контенту $('#list').click(function()< popup_open('#myPopup'); >) // открываем модальное окно сразу при загрузки страницы popup_open('#myPopup'); // Добавляем обработчик закрытия модального окна $(document).on('click', '.popup .close, .overflow', function()< popup_close() return false; >) >) function popup_open(selector)< if (selector.length)< win_top = $(window).scrollTop(); $('#list').css(< 'position' : 'fixed', 'left' : '0', 'right' : '0', 'top' : '0', // Добавляем смещение, чтобы на фоне была именно та часть, что просмаривал пользователь 'margin-top': '-'+win_top+'px' >) $('.overflow,'+selector).fadeIn(); > > function popup_close()< $('.overflow, .popup').hide(); $('#list').css(< 'position' : 'static', 'margin-top': '0px' >) // Возвращаем скролл на место $(window).scrollTop(win_top); >

Здесь в качестве параметра передается селектор (id) попапа. Такой подход удобен, если на странице есть несколько попапов, которые вызываются кликом по ссылкам. тогда в атрибуте href ссылки можно прописать id блока, который нужно открыть в виде якоря:
href=»#myPopup» и при обработки клика смотреть значение данного атрибута

var > И остался последний штрих - мобильная адаптация нашего модального окна. Здесь все совсем просто - при достижении определенной ширины меняем ему выравнивание и даем динамически расчитывать размеры:

@media screen and (max-width: 650px) < .popup< width: auto; margin-left: 0px; top: 40px; left: 10px; right: 10px; >>
  • адаптивная верстка,
  • копилка идей,
  • jQuery,
  • для начинающих,

Как называются всплывающие окна на сайтах?

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

1. Модальные окна (modal window)

Понравилось то, что прочитали? Не пропустите следующую статью:

Хотите еще больше результатов?
Посмотрите наш каталог инструментов для интернет-бизнеса.

Об Юджине

Евгений Бос — автор JumpOut’a, Камбекера и proТаймера. Интересуюсь западными фишками и инструментами, откуда и родились идеи этих продуктов.

Также принимаю заказы на web-разработку от 1000₽ / час (PHP, Node.JS, JS, React, MySQL, Mongo).

JumpOut

MakeDreamProfits. Все права защищены. Копирование только со ссылкой на оригинал.
Отправляя любую форму на сайте, вы соглашаетесь с политикой конфиденциальности

Поп-ап и другие всплывающие окна. Разбираемся в терминологии

Валентин – дизайнер интерфейсов. Гоша – разработчик. Они работают в одной компании над одним проектом. Как-то раз подходит Валентин к Гоше с новой задачей: «Давай по нажатию этой кнопки будем открывать попап!».

Сказал и ушел, нарисовав себе в голове такую картину:

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

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

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

Модальность

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

Классификация всплывающих окон

Alert

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

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

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

Dialogs (диалоговое окно)

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

Pop-up

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

Notifications

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

Lightbox

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

Tooltip

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

Pop-over

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

В заключение

В данной статье приведена общепринятая классификация всплывающих окон, но в некоторых гайдлайнах можно встретить как дополнения, так и некоторые расхождения: например, где-то popover и tooltip это разные вещи, а где-то – одно и тоже. Главное – придерживаться правил конкретной платформы. Например, в OS X модальное диалоговое окно всегда выезжает сверху и дает ресайзить родительское окно, а в Windows оно всегда появляется посередине и наглухо блокирует родительский интерфейс.

Автор: Денис Данилов. Оригинал статьи можно прочитать тут .

Чем отличается модальное окно от попапа

Модальное или немодальное окно: как выбрать?

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

5 янв. 2021

Что такое модальное окно


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

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

Язык модальных окон


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

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

Типы модальных окон


Nielsen Norman Group создали удобную схему, на которой показаны основные отличия между типами модельных окон:

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

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

Что такое немодальное окно


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

Когда следует использовать модальность

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

«Модальность создает фокусировку, не давая людям заниматься другими делами, прежде чем они не завершат задачу или не отклонят вызванное в модальном окне представление» — Apple

Google советует использовать модальные экраны(диалоговые окна) для…

«Критически важной информации, которая требует конкретной пользовательской задачи, решения или подтверждения» Google

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

Когда не следует использовать модальность

  1. Не используйте модальные диалоги для несущественной информации, не связанной с текущим пользовательским потоком.
  2. Избегайте модальных диалогов, которые прерывают важные процессы, такие как потоки оформления заказа. Оформление заказа — это процесс с высокими ставками как для пользователей, так и для предприятий: пользователи хотят убедиться, что процесс является плавным, безопасным и безошибочным, а компании хотят, чтобы пользователь следовал их решению о покупке. Модальные диалоги, если они необоснованны, могут в лучшем случае отвлекать пользователей и в худшем случае подрывать их доверие.
  3. Избегайте модальных диалогов для принятия сложных решений, требующих дополнительных источников информации, недоступных в модальном окне. Модальные диалоги следует использовать для коротких прямых диалогов с пользователем. Если модальное окно требует от пользователя проведения сложного исследования или обращения к дополнительным источникам информации (потенциально заблокированным модальным окном), то это не тот элемент пользовательского интерфейса, который подходит для этого взаимодействия.

Когда следует использовать немодальное окно

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *