Что такое модальное окно: Чем отличаются модальные окна от pop-up’ов — Проекторат

Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают

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

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

Давайте начнем наше исследование со смелого утверждения:

Существует всего два типа экранов

1. Модальные экраны
2. Немодальные экраны

Вот и все. Позвольте мне объяснить. (Почти) Каждый экран попадает в одну из этих двух категорий. Чтобы понять, что отличает модальный экран от немодального, мы сначала должны дать определение значения

модальный экран.

Что такое «Модальный экран»? Примеры модальных экранов

Модальные экраны могут быть разных форм и размеров:

• Полноэкранные модальные представления (1)
• Всплывающие окна (Popups) (2)
• Вспомогательные экраны (Popovers) (3)
• Лайтбоксы (Lightboxes) (4)
• Предупреждения / Уведомления
•  (Многошаговые) диалоги окна
• …

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

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

Предстоящие воркшопы

— Wikipedia

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

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

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

Основное отличие заключается в том, как вы можете взаимодействовать с каждым экраном. В то время, как

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

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

https://ux.pub/panel-vkladok-eto-novoe-gamburger-menyu/

Почему следует использовать модальность?

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

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

— Apple

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

Теперь, когда мы знаем, как выглядит модальный экран, чем отличается от немодального и какова его цель, мы должны спросить себя: «В какой ситуации мы должны его использовать?»

Я обещал вам котят, так что приступим: давайте представим, что мы создаем гениальное и инновационное приложение: «Purrrfect» – база данных о котятах, которая позволяет пользователям загружать, просматривать и комментировать GIF-изображения симпатичных кошек. Гениальная концепция.

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

Юзерфлоу приложения Purrrfect

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

Теперь, какой из этих экранов является модальным, а какой нет? Классификация вовсе не простая – это мое личное эмпирическое правило:

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

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

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

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

—  Google

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

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

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

Давайте вернемся к нашему приложению: возможный интерфейс для Purrrfect может выглядеть следующим образом:

Возможный интерфейс приложения Purrrfect

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

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

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

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

—  Apple

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

Apple не была бы Apple, если бы время от времени не нарушала свои собственные правила: например, новый App Store открывает вкладки «Сегодня» в виде модального экрана, но все же позволяет пользователям переходить к дальнейшим рекомендациям в нижней части модального экрана (без четкой конечной точки). Таким образом, пользователи перемещаются глубже внутри модального экрана, не имея фиксированной конечной точки. В этом процессе они теряют возможность менять вкладки и больше не могут закрывать модальное представление на под страницах. Открытие того же экрана приложения не из рекомендации, приводит к тому, что экран отображается, как немодальный. Это сохраняет панель вкладок и возможность вернуться назад (снова кликните по иконке текущей панели вкладок, чтобы перейти к ее главному экрану).

Непоследовательный интерфейс Apple

Непоследовательность слева может быть исправлена с помощью …

• A:… открытие рекомендаций на немодальном дочернем экране с помощью кнопки «Назад» и сохранение панели вкладок
• B:… закрытие модального экрана, как только пользователь нажимает на ссылку внутри модального экрана, и продолжение работы с немодальным дочерним экраном на родительском уровне приложения.

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

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

• Всегда показывайте кнопку закрытия (или «отменить» / «отклонить» / «свернуть» /…) в верхней части панели навигации. Когда пользователь теряется, он может легко закрыть оверлей и вернуться на верхний уровень приложения.
• Кнопки «Отмена» на iOS и Android чаще всего располагаются в верхней левой части панели навигации. Android предпочитает значок закрытия / «X», в то время как iOS предпочитает слово «Отмена». Тем не менее, иконки кнопок также довольно распространены и в iOS.
• Кнопки «Сохранить» на iOS и Android по умолчанию расположены в верхней правой части панели навигации. Тем не менее, это размещение недоступно на больших устройствах. Поэтому фиксированное floating размещение внизу экрана или встроенное в конце страницы является альтернативой, которую я лично рекомендую.

Многошаговые модальные окна

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

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

Анимации

Пока что iOS и Android очень похожи в том, как они используют модальные экраны. Однако все меняется, как только вы смотрите на анимацию.

• iOS: анимация в iOS очень стандартизирована.
  Немодальные экраны выталкиваются на фрейм справа. Панель вкладок остается неизменной в нижней части экрана. Панель навигации вверху также остается на месте, но ее содержимое исчезает в результате пользовательского перехода. Эта анимация также обеспечивает основу для жеста смахивания с края, используемого для возврата назад на экран, на котором размещена кнопка «Назад».
  Модальные экраны, с другой стороны, скользят от нижней части фрейма и перекрывают весь интерфейс (новая верхняя панель навигации). Они не используют жест смахивание с края, но жест «потяните, чтобы закрыть» может помочь, если ничего не надо сохранять.
• Android: анимации на Android гораздо разнообразнее. Google рекомендует использовать «значимые переходы» в рекомендациях Material Design. «Дочерний элемент раскрывается при нажатии», в то время, как верхняя панель навигации скрывает свое содержимое. Тем не менее, Android не различает модальные и немодальные анимации.

Вердикт

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

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

Модальное окно — это… Что такое Модальное окно?

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

Назначение

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

• Потребовать от пользователя ввод какой-либо информации — начиная от простого «да/нет» до большого количества настроек или данных, необходимых для продолжения работы с родительским окном или приложением;
• Привлечь внимание пользователя к чему-либо важному. Этот вариант часто критикуется специалистами по эргономике, потому что редко это важно настолько, чтоб блокировать работу приложения целиком, но, тем не менее, продолжает использоваться по той причине, что он существенно более лёгок в реализации;^[2][3][4]
• Указать пользователю на невозможность отмены выполняемого им действия и потребовать подтверждения этого действия. Этот вариант тоже критикуется, вместо него рекомендуется обеспечить-таки возможность отмены.^[5]

Критика

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

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

Специалисты по эргономике, напротив считают, что в подавляющем большинстве ситуаций, ограничение свободы действий пользователя и строгая последовательность этих действий приводит к существенному уменьшению удобства и расстраивает пользователей.^[6] Использование модальных окон заставляет пользователя концентрировать своё внимание на каком-то одном аспекте задачи, тогда как на практике он может одновременно работать с большими объёмами информации, размещёнными в различных окнах приложения и постоянно переключаться между ними. В таких случаях использование модальных окон ведет к уменьшению эффективности работы.

Создание окна, модального относительно рабочего стола, могло нарушить доступность всей системы в целом. Например, такая функция была предусмотрена в Microsoft Windows 3.x, 95 и 98, однако была убрана из NT и последующих версий, и модальность окна относительно системы больше не блокировала доступ к ней.^[7]

См. также

Примечания

Модальное окно. Компоненты · Bootstrap. Версия v4.0.0

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

Как это работает

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

• Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа <body>, вместо него прокручивая модальные окна
• Клик вне модального элемента автоматически закрывает его.
• Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
• Модальные элементы имеют position: fixed, что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal.
• Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
• Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Далее – использование и примеры.

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

Modal body text goes here.

<div tabindex="-1" role="dialog">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <p>Modal body text goes here.</p>
      </div>
      <div>
        <button type="button">Save changes</button>
        <button type="button" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

«Живое» демо

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

Woohoo, you’re reading this text in a modal!

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModal">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Прокрутка длинного содержимого

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

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalLong">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Вертикальное центрирование

Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModalCenter">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

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

Popover in a modal

This button triggers a popover on click.

---

Tooltips in a modal

This link and that link have tooltips on hover.

Запустить модальное окно

<div>
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" title="Popover title" data-content="Popover body content is set in this attribute. ">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" title="Tooltip">This link</a> and <a href="#" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Использование сетки

Используйте систему сеток Bootstrap внутри модального элемента, расположив .container-fluid внутри .modal-body. После этого используйте обычную систему сеток обычным образом.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-auto

.col-md-2 .ml-auto

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Запустить модальное окно

<div>
  <div>
    <div>
      <div>.col-md-4</div>
      <div>.col-md-4 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-3 .ml-auto</div>
      <div>.col-md-2 .ml-auto</div>
    </div>
    <div>
      <div>.col-md-6 .ml-auto</div>
    </div>
    <div>
      <div>
        Level 1: .col-sm-9
        <div>
          <div>
            Level 2: .col-8 .col-sm-6
          </div>
          <div>
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Комбинируйте содержимое модальных элементов

Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте event. relatedTarget и атрибуты data-* (возможно через jQuery) для изменения содержимого в зависимости от нажатой кнопки.

Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap

<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>New message</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <form>
          <div>
            <label for="recipient-name">Recipient:</label>
            <input type="text">
          </div>
          <div>
            <label for="message-text">Message:</label>
            <textarea></textarea>
          </div>
        </form>
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal'). on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Анимация при удалении

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

<div tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамическая высота

Если высота модального элемента изменяется при его открытии, вам следует вызвать $('#myModal').modal('handleUpdate') для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.

Доступность

Удостоверьтесь, что добавили в .modal role="dialog" и aria-labelledby="...", привязанные к названию модального элемента, и role="document" в .modal-dialog. Дополнительно вы можете описать диалог модального элемента атрибутом aria-describedby, добавленным в .modal.

Встраивание видео из YouTube

Встраивание видео в модальные элементы требует дополнительного JavaScript для запрета автоматического воспроизведения и т.д. Дополнительная информация здесь.

Дополнительные размеры

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

Большое модальное окно Малое модальное окно

<!-- Большое модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-lg">Большое модальное окно</button>

<div tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

<!-- Малое модальное окно -->
<button type="button" data-toggle="modal" data-target=".bd-example-modal-sm">Малое модальное окно</button>

<div tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div>
    <div>
      ...
    </div>
  </div>
</div>

Использование

Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в <body> класс .modal-open для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .modal-backdrop.

Через атрибуты

Активируйте модальный элемент без JavaScript. Установите data-toggle="modal" в контролирующем элементе, таком как кнопка, наряду с data-target="#foo" или href="#foo", для обращения к функциональности “toggle” для частного модального элемента.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Вызовите модальный элемент с id=”myModal” одной строкой JavaScript:

$('#myModal'). modal(options)

Параметры

Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в data-, например data-backdrop="".

Название	Тип	По умолч.	Описание
backdrop	boolean or the string 'static'	true	Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне.
keyboard	boolean	true	Закрывает модальный элемент по нажатию ESC.
focus	boolean	true	Фокусируется на модальном элементе по инициализации.
show	boolean	true	Показывает модальный элемент по инициализации.

Методы

Асинхронные методы и переходы

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

Смотрите документацию JavaScript

.modal(options)

Активирует содержимое как модальный элемент. Принимает object параметров.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

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

$('#myModal').modal('toggle')

.modal('show')

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

$('#myModal').modal('show')

.modal('hide')

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

$('#myModal').modal('hide')

.modal('handleUpdate')

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

$('#myModal').modal('handleUpdate')

.modal('dispose')

Уничтожает модальный элемент.

События

Модальный элемент в Bootstrap имеет несколько событий для встраивания в функциональность. Все события модальных элементов запускаются внутри самих элементов (т.е. в <div>).

Тип события	Описание
show.bs.modal	Это событие запускается немедленно, когда экземпляр метода show вызван. Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
shown.bs.modal	Это событие запускается, когда модальный элемент сделан видимым юзеру (будет ждать завершения переходов CSS). Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события relatedTarget.
hide.bs.modal	Это событие запускается немедленно, когда экземпляр метода hide вызван.
hidden.bs.modal	Это событие запускается, когда модальный элемент больше не является скрытым (будет ждать завершения переходов CSS).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

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

Форма регистрации AKIRA для пользователей с корпоративными медицинскими страховыми полисами Manulife Financial. Что же такое номер страхового полиса Manulife?

Итак, вы на распутье: прервать процесс регистрации? добавить ещё одну страницу? или же модальное окно? Как решить, что выбрать?

Проблема: нет готовых правил использования модальных окон

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

Модальные окна помогают не потерять контекст

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

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

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

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

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

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

Источник: https://www.nngroup.com/articles/popups/
Оригинал

Сопоставление модальности по компонентам

Я сделал ещё проще: получилась удобная диаграмма, соединяющая терминологию, которую мы только что рассмотрели☝️, с реальными компонентами Google Material Design.

Оригинал

Мой способ принятия решений

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

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

Шаблон (на английском)

А тут мы перевели её на русский:

Оригинал

Выводы

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

Свойство «Модальное окно (Modal)» — Access

Применение

Объект Form
Объект Report

Свойство Modal (Модальная) указывает, открывается ли форма или отчет как модальный окно. Когда форма или отчет открываются в виде модального окна, необходимо закрыть его, прежде чем перемещать фокус к другому объекту. Свойство имеет значение типа Boolean, доступное для чтения или записи.

выражение.Modal

выражение — обязательный аргумент. Выражение, которое возвращает один из объектов в списке «Применяется к».

Замечания

Свойство Modal может принимать следующие значения:

Значение	Visual Basic	Описание
Да	True	Форма или отчет открывается как модальное окно.
Нет	False	(Значение по умолчанию.) Форма открывается как немодальное окно.

Это свойство можно задать с помощью страницы свойств формы или отчета, макроса или кода Visual Basic для приложений (VBA).

При открытии модального окна другие окна в Microsoft Office Access 2007 будут недоступны, пока не будет закрыта форма (однако можно переключиться на окна других приложений). Чтобы также отключить доступ к меню и к панелям инструментов, задайте значение «Да» для свойств Modal (Модальное окно) и PopUp (Всплывающее окно).

Свойство BorderStyle (Тип границы) используется для указания типа границы формы. Обычно для свойства BorderStyle модальных форм задается значение Dialog (Диалог).

Совет

С помощью свойств Modal (Модальное окно), PopUp (Всплывающее окно) и BorderStyle (Тип границы) можно создать настраиваемое диалоговое окно. Задайте для свойств Modal и PopUp значение Yes (Да), а для свойства BorderStyle — значение Dialog (Диалог).

Форма становится модальной, только если свойство Modal имеет значение «Да» и выполняются следующие условия:

• Форма открывается в режиме формы в области навигации.

• Форма открывается в режиме формы с помощью макроса или кода VBA.

• Выполняется переключение из конструктора в режим формы.

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

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

Примечание: Чтобы открыть форму, в которой свойства Modal (Модальное окно) и PopUp (Всплывающее окно) имеют значения «Да», можно воспользоваться значением «Диалог» аргумента «Режим окна» в макрокоманде ОткрытьФорму.

Пример

Для получения значения свойства Modal формы Order Entry можно использовать следующий синтаксис:

Dim b As Booleanb = Forms(«Order Entry»).Modal

Для задания значения свойства Modal применяется следующий синтаксис:

Forms(«Order Entry»).Modal = True

Что лучше – модальное окно или страница?

Active блог: Что лучше – модальное окно или страница?

Загрузка…

Что лучше – модальное окно или страница?

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

На чем остановить выбор?

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

Для чего вообще нужны модальные окна

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

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

Типы окон

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

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

• Немодальное окно – взаимодействие юзабилити с контекстом может происходить в фоновом режиме, путем использования кнопок и ссылок. При этом наложение сохраняет видимость.

• Диалоговое окно – форма взаимодействия между информационной системой (сайтом) и пользователем.

• Overlay – наложение, появляющееся в верхней части страницы. Оно всегда меньше нижней части страницы.

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

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

Схематично типы окон представлены на рисунке

Сравнительная характеристика элементов режима

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

Что лучше – модальное окно или страница?

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

    

Выводы

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

Возврат к списку

Модальные окна в 1С 8.3

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

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

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

Как устранить ошибку в 1С: «Использование модальных окон в данном режиме запрещено»

Такая ошибка начала появляться после перехода 1С на новый интерфейс платформы 1С 8.3 – «Такси». Это связано с тем, что в ней разработчиками была включена работа с окнами, но без режима модальности.

Рис.1 Предупреждение

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

Рис.2 Выбор режима

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

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

Рис.3 Служебное сообщение

Приложения, которые используются через веб-клиент, на iPad, в облаке, например, на «1Сfresh.com», не используют этот режим. Во всех новых конфигурациях используется безмодальный режим работы интерфейса.

Отказ от модальности

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

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

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

Терминология

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

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

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

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

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

Flash Notice / Growl Notification — У этих уведомлений есть время, связанное с ними. Вы можете решить разобраться с ними сразу же, или, если вы ничего не сделаете, через определенное время они уволятся.

Лайтбоксы / Театры — используются для увеличения и фокусировки одной части экрана.Эти контейнеры чаще всего используются для просмотра изображений. Обычно после этого вы можете перемещаться по похожему контенту (следующая фотография в галерее), не закрывая и не нажимая на другой эскиз. Они могут быть заблокированы или нет. Зависит от того, хотите ли вы, чтобы люди возвращали контекст, в котором они находились, или продолжали работу в новом потоке контекста.

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

Источник: https://www.quora.com/Whats-the-difference-between-a-modal-a-popover-and-a-popup

шаблонов проектирования — Когда следует использовать модальное диалоговое окно?

Я разместил это по другому вопросу, но я также включу его сюда:

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

Для моих целей и пользователей здесь около предположений (согласовано заинтересованными сторонами и МСП, но может быть отменено при пользовательском тестировании):

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

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

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

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

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

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

Руководство по интерфейсу пользователя

— В чем (или есть ли) разница между модальным окном и наложением модального окна?

Всплывающие окна можно разделить на три категории в зависимости от их модальности:

1. Модальные окна системы (блокировка любого взаимодействия с ОС)
2. Application Modal windows (блокирует любое взаимодействие с приложением)
3. Немодальные окна (позволяют пользователям игнорировать и продолжать работу)

   ---

1.Системные модальные окна:

Это когда вся ОС заблокирована и пользователь должен выбрать опцию, чтобы продолжить. Это тип всплывающих окон, которых следует избегать; если у вас нет очень важной причины с этим справиться.
Если вы в сети, то насколько мне известно, вы не будете иметь дело с этим. Кстати, на Windows OS типичная модальная система (также имеет оверлей) выглядит следующим образом:

2. Режимы приложения:

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

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

3. Немодальные параметры

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

---

А как насчет оверлеев?

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

Здесь интересно то, что черный оверлей не означает, что что-то заблокировано; он просто убирает беспорядок и вносит контраст в поле. Также, когда вы нажимаете на фон, вы выходите из «режима галереи»!

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

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

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

Когда (и когда нет) их использовать

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

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

Пользовательский интерфейс Режимы — это особые состояния, в которых одна и та же система имеет несколько разные пользовательские интерфейсы. Каждый режим может иметь разные команды, или одна и та же команда (или действие) может давать разные результаты в зависимости от режима системы. Другими словами, в разных режимах один и тот же ввод будет иметь разные результаты. Например, компьютер с включенным Caps Lock находится в специальном режиме: все набираемые буквы будут отображаться как заглавные. Ввод буквы при включенном Caps Lock имеет другой эффект, чем при выключенном.Или в режиме отслеживания изменений Microsoft Word все ранее сделанные изменения и комментарии видны (тогда как в обычном режиме по умолчанию они не отслеживаются и не отображаются).

С таким пониманием «режима» и «диалога» мы можем легко определять модальные диалоги.

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

Модальный диалог похож на мою кошку Эмму, которая мяукает в 7 утра каждое утро, предлагая мне покормить ее. Возможно, я пытаюсь заснуть или готовиться к новому дню, но моя кошка встает передо мной, а затем мяукает все громче и непрерывно, пока я не посмотрю на нее. Я должен прекратить то, что я делаю, чтобы немедленно обратиться к кошке, если я когда-нибудь надеюсь закончить свою задачу. Иногда она решает сделать это в 3 часа ночи, пока мы спим. Если у нас останутся гости, это может раздражать и смущать. (В защиту моей кошки, как только я ее кормлю, она очень спокойная и у нее милый и общительный характер.)

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

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

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

Недостатки модальных диалогов

Вот некоторые из распространенных проблем, вызываемых модальными диалогами:

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

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

Рекомендации по использованию модальных диалоговых окон

Когда уместно использовать модальные диалоги? Вот несколько рекомендаций, которые помогут определить, действительно ли необходимы модальные диалоги.

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

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

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

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

Microsoft Powerpoint использует модальные диалоги для предотвращения необратимых ошибок или непреднамеренных действий пользователя, таких как выход из приложения без сохранения работы. Приложение Google Mail для настольных ПК: это модальное диалоговое окно появляется, когда пользователи забывают прикрепить файлы после включения в свои сообщения таких ключевых фраз, как «Я прикрепил» или «См. Прикрепленные». Этот диалог предотвращает ошибку пользователя (и неудобные последующие электронные письма).

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

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

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

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

3. Модальные диалоговые окна можно использовать для фрагментации сложного рабочего процесса на более простые шаги.

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

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

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

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

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

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

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

5. Не используйте модальные диалоги для несущественной информации, не связанной с текущим пользовательским потоком.

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

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

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

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

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

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

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

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

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

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

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

Рассмотрите немодальные диалоги вместо

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

Более того, некоторые немодальные диалоговые окна плохо транслируются между устройствами и браузерами — например, немодальное окно в Chrome на рабочем столе может стать модальным в Safari на iPhone, например, с Meowbox.com ниже.

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

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

Немодальные окна Google Mail позволяют легко переключаться между записью и чтением информации.

Заключение

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

Когда дело доходит до модальных диалогов, учтите следующее: никто не любит, когда его прерывают, но, если необходимо, убедитесь, что оно того стоит.

Модальные файлы начальной загрузки

---

Модальный плагин

Модуль Modal — это диалоговое / всплывающее окно, которое отображается поверх текущего страница:

Нажмите, чтобы открыть модальное окно

Совет: Плагины могут быть включены индивидуально (с использованием индивидуальных «модальный.js «файл) или все сразу (используя «bootstrap.js» или «bootstrap.min.js»).

---

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

В следующем примере показано, как создать базовое модальное окно:

Пример

Открыть модальный

Попробуй сам »

Объяснение примера

Часть «Спусковой крючок»:

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

Затем включите два атрибута data- *:

• data-toggle = "modal" открывает модальное окно
• data-target = "# myModal" указывает на идентификатор модального

«Модальная» часть:

Родительский