Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают
Многие, в основном молодые, дизайнеры создают цифровые продукты, основываясь на своих чувствах. Хотя, во многих случаях это может сработать, существуют проверенные общие стандарты, которые помогают вам логически создавать обоснованные решения для интерфейса, а не полагаться на свою интуицию.
В этой статье мы собираемся изучить общий стандарт модальности в пользовательских интерфейсах, обсудить причину, по которой существуют только два основных типа экранов, и проанализировать, как приложения и веб-сайты терпят неудачу при преобразовании информационных архитектур и юзерфлоу в интуитивно понятные интерфейсы. Ох, и мы поговорим о котятах.
Давайте начнем наше исследование со смелого утверждения:
Существует всего два типа экранов- Модальные экраны
- Немодальные экраны
Вот и все. Позвольте мне объяснить. (Почти) Каждый экран попадает в одну из этих двух категорий. Чтобы понять, что отличает модальный экран
Модальные экраны могут быть разных форм и размеров:
- Полноэкранные модальные представления (1)
- Всплывающие окна (Popups) (2)
- Вспомогательные экраны (Popovers) (3)
- Лайтбоксы (Lightboxes) (4)
- Предупреждения / Уведомления
- (Многошаговые) диалоги окна
- …
И модальные, и немодальные экраны являются дочерними представлениями, то есть они подчинены главному окну приложения. Но есть одно важное отличие:
«Модальное окно создает режим, который отключает главное окно, но оставляет его видимым вместе с модальным окном, как дочерним окном перед ним.
Пользователи должны взаимодействовать с модальным окном, прежде чем смогут вернуться в родительское приложение» Предстоящие воркшопы
— Wikipedia
Большинство модальных экранов, особенно в десктопных приложениях, можно легко идентифицировать, поскольку они визуально перекрывают главное окно: тоже самое со всплывающими окнами, которые исчезают из основного окна в фоновом режиме, всплывающих меню и всплывающих диалоговых окон, лайтбоксов, оповещений…
Однако пространство экрана на мобильных устройствах ограничено, поэтому многие модальные экраны на мобильных устройствах занимают весь экран. Теперь они закрывают основное окно, скрывая его, следовательно, их труднее отличить от
Основное отличие заключается в том, как вы можете взаимодействовать с каждым экраном. В то время, как немодальный экран позволяет пользователям просто вернуться к родительскому экрану, модальный экран требует, чтобы пользователи завершили действие, прежде чем вернуться в главное окно («сохранить» в нашем примере) или отменили текущее действие.
Наиболее ярким визуальным индикатором
https://ux.pub/panel-vkladok-eto-novoe-gamburger-menyu/
Модальные экраны решают простую проблему: пользователи легко отвлекаются, поэтому иногда приходится привлекать их внимание (источник).
Когда следует использовать модальность?«Модальность фокусирует внимание на том, что люди не могут заниматься другими делами, пока не выполнят задачу или не отклонят сообщение или представление»
— Apple
Теперь, когда мы знаем, как выглядит модальный экран, чем отличается от немодального и какова его цель, мы должны спросить себя: «В какой ситуации мы должны его использовать?»
Я обещал вам котят, так что приступим: давайте представим, что мы создаем гениальное и инновационное приложение: «Purrrfect» – база данных о котятах, которая позволяет пользователям загружать, просматривать и комментировать GIF-изображения симпатичных кошек. Гениальная концепция.
(Упрощенный) юзерфлоу нашего приложения может выглядеть следующим образом: пользователь открывает приложение, он входит в одну из нескольких доступных вкладок (наша база данных о котятах), нажимает на одного из котят (заходит на страницу подробностей об одном котенке), а затем нажимает на раздел комментариев (входит в раздел комментариев).
Юзерфлоу приложения PurrrfectКроме того, пользователь может выполнять дополнительные действия на каждом этапе. Например, он может добавить другого котенка в базу данных на экране базы данных котят. Или он может редактировать данные на экране подробностей котенка. Хорошая вещь.
Теперь, какой из этих экранов является модальным, а какой нет? Классификация вовсе не простая – это мое личное эмпирическое правило:
Используйте модальные экраны для автономных процессов, а немодальные экраны для всего остального.
«Автономный процесс» – это любое действие, которое имеет четкую начальную и конечную точку. В течение ограниченного периода времени этого действия он выводит пользователя из общего юзерфлоу, позволяет ему сосредоточиться на действии и затем возвращает его туда, откуда он начал.
Google формулирует это следующим образом: используйте модальные экраны (диалоговые окна) для…
«Критически важной информации, которая требует конкретной пользовательской задачи, решения или подтверждения»
В случае нашего приложения Purrrfect это означает, что основной юзерфлоу (используемый для исследования приложения) не является модальным. Однако специальные ограниченные по времени действия, такие как добавление котят, редактирование котят и написание комментариев, являются модальными.
Все модальные действия могут быть отменены или успешно завершены, прежде чем пользователь вернется к основному процессу. По этой причине модальные экраны используют кнопки «Отмена» и «Сохранить» (или другие подобные действия) вместо кнопки «Назад». Если ваша кнопка «Назад» одновременно запускает действие сохранения на немодальном экране, вы можете рассмотреть возможность перехода на модальный экран с помощью кнопок «Отмена» и «Сохранить». Часто встречаемое противоречие: если два разных действия, таких как «Отмена» и «Сохранить», не имеют смысла на вашем модальном экране (потому что они вызовут одно и то же действие), вы можете переключиться на
Давайте вернемся к нашему приложению: возможный интерфейс для Purrrfect может выглядеть следующим образом:
Возможный интерфейс приложения PurrrfectВ реальном мире различие между модальными и немодальными экранами часто менее очевидно. Например, вид «изображение на весь экран» является модальным в большинстве приложений, хотя это не процесс или диалог. Модальный экран может также иметь смысл в других особых ситуациях, чтобы генерировать фокус. Если бы экран информации о котенке (в центре) был видом конечной точки без других действий, таких как редактирование

Дизайнер обязан оценить, является ли действие автономным или частью общего процесса исследования приложения, и решить, имеет ли модальность смысл или нет. В случае сомнений помните слова Apple:
Минимизируйте использование модальности. Обычно люди предпочитают взаимодействовать с приложениями нелинейным образом. Рассматривайте возможность создания модального контекста только в тех случаях, когда важно привлечь чье-либо внимание, когда задача должна быть завершена или оставлена для продолжения использования приложения или для сохранения важных данных.
— Apple
Дисклеймер: Конечно, интерфейс может прекрасно работать без строгого различия между модальным и немодальным представлениями. Тем не менее, концепция модальности глубоко встроена в интерфейс экосистем Apple, Google, Microsoft и других компаний, и пользователей, которые разработали соответствующие ожидания.
Apple не была бы Apple, если бы время от времени не нарушала свои собственные правила: например, новый App Store открывает вкладки «Сегодня» в виде модального экрана, но все же позволяет пользователям переходить к дальнейшим рекомендациям в нижней части модального экрана (без четкой конечной точки). Таким образом, пользователи перемещаются глубже внутри модального экрана, не имея фиксированной конечной точки. В этом процессе они теряют возможность менять вкладки и больше не могут закрывать модальное представление на под страницах. Открытие того же экрана приложения не из рекомендации, приводит к тому, что экран отображается, как немодальный. Это сохраняет панель вкладок и возможность вернуться назад (снова кликните по иконке текущей панели вкладок, чтобы перейти к ее главному экрану).
Непоследовательность слева может быть исправлена с помощью …
- 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">×</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">×</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">×</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">×</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-9Level 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
читайте инфо по событиям модальных элементов.
<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">×</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
шаблонов проектирования — Когда следует использовать модальное диалоговое окно?
Я разместил это по другому вопросу, но я также включу его сюда:
Я работаю над реализацией веб-страницы, которая должна выглядеть как гибкое веб-приложение. Пользователь может заполнить несколько форм.
Для моих целей и пользователей здесь около предположений (согласовано заинтересованными сторонами и МСП, но может быть отменено при пользовательском тестировании):
- Пользователи, заходящие в это веб-приложение , знают, что они хотят делать .Они приезжают, чтобы выполнить заранее известное задание. Это цель этой страницы. Пользователи приходят сюда не оглядываться.
- Поскольку они знают, что делают, они знают необходимую информацию для заполнения необходимых форм.
Я предлагал использовать лайтбоксы. Обычно я против использования модальных окон, но я также ОЧЕНЬ против того, чтобы просто отправлять пользователя на новые страницы каждый раз, когда они пытаются выполнить простое обновление или добавление. И я не думаю, что аккордеоны здесь правильное решение (хотя они могут быть альтернативным вариантом).
В нашем контексте формы лайтбоксов отображаются только по запросу пользователя . Они позволяют быстро и легко покинуть / закрыть . Они сосредотачивают внимание пользователя на действии , которое они только что запросили, , поэтому нет ничего удивительного в изменении на странице. Пользователи не удаляют их со страницы / приложения, в котором они работают.
Одна из форм имеет три (3) незаметных ступеньки. Итак, мы используем мастер в лайтбоксе с отслеживанием прогресса. На самом деле это было серьезной проблемой для одного человека в нашей группе, который (справедливо) категорически против многопанельных модальных окон.Обычно я соглашался полностью.
В этом случае мастер является приемлемым шаблоном для этого типа взаимодействия. Пользователи знают, что они пытаются сделать, и шаги, необходимые для этого. Лайтбоксы фокусируют внимание пользователя на запрошенном действии, не покидая обзорной страницы (которая дает информацию о выбранных вариантах и предыдущих действиях), но позволяет быстро закрыть.
Хотя я согласен с тем, что модалы / оверлеи / лайтбоксы и т. Д. Следует использовать с осторожностью, они не являются злом или плохим UX по своей природе.Запрошенные пользователем версии для конкретной задачи являются допустимым вариантом использования и во многих ситуациях могут превосходить альтернативы при тщательной реализации.
Руководство по интерфейсу пользователя— В чем (или есть ли) разница между модальным окном и наложением модального окна?
Всплывающие окна можно разделить на три категории в зависимости от их модальности:
- Модальные окна системы (блокировка любого взаимодействия с ОС)
- Application Modal windows (блокирует любое взаимодействие с приложением)
- Немодальные окна (позволяют пользователям игнорировать и продолжать работу)
1.Системные модальные окна:
Это когда вся ОС заблокирована и пользователь должен выбрать опцию, чтобы продолжить. Это тип всплывающих окон, которых следует избегать; если у вас нет очень важной причины с этим справиться.
Если вы в сети, то насколько мне известно, вы не будете иметь дело с этим. Кстати, на Windows OS типичная модальная система (также имеет оверлей) выглядит следующим образом:
2. Режимы приложения:
Это интересная часть.Теперь всплывающее окно блокирует любую дальнейшую работу в окне приложения (которое показывало всплывающее окно), но позволяет пользователю взаимодействовать с другими приложениями.
В браузере это может быть окно предупреждения, созданное с помощью javascript, или что-то еще, например диалоговое окно настроек браузера. Например, это где-то из настроек Chrome.
Приложение не позволяет щелкнуть где-либо еще в своем окне, а также использует тень вместо черного фона.
При использовании окон предупреждений имейте в виду, что пользователи могут отключать всплывающие окна в браузере, поэтому полагаться на них немного рискованно.
3. Немодальные параметры
Окна этого типа позволяют пользователям игнорировать их и продолжать делать то, что они делали. Наверное, они не имеют отношения к твоему вопросу.
А как насчет оверлеев?
Ниже вы можете увидеть галерею изображений. Это всплывающее окно, в котором используется наложение (как в facebook).
Здесь интересно то, что черный оверлей не означает, что что-то заблокировано; он просто убирает беспорядок и вносит контраст в поле. Также, когда вы нажимаете на фон, вы выходите из «режима галереи»!
Теперь, если мы сравним галерею изображений с модальными окнами приложения и системы, мы можем легко увидеть шаблон (прозрачный фон и окно), но их поведение несколько отличается.
И со временем пользователи Интернета ожидают, что они смогут легко закрыть окна и продолжить то, что они делали, просто щелкнув прозрачный черный фон.
Таким образом, мы должны быть осторожны, когда пользователь должен выполнить действие в модальном окне, а вы хотите указать, что что-то недоступно для щелчка.
Между прочим, для простоты я использовал термин окно в равной степени с диалоговым окном, что не всегда верно
Когда (и когда нет) их использовать
Чтобы лучше понять разницу между модальными и немодальными диалогами, давайте посмотрим, что означают термины «диалог» и «модальный».
Диалог (или диалог ) относится к разговору между двумя людьми. В пользовательских интерфейсах диалог — это «разговор» между системой и пользователем, который часто запрашивает информацию или действие от пользователя.
Пользовательский интерфейс Режимы — это особые состояния, в которых одна и та же система имеет несколько разные пользовательские интерфейсы. Каждый режим может иметь разные команды, или одна и та же команда (или действие) может давать разные результаты в зависимости от режима системы. Другими словами, в разных режимах один и тот же ввод будет иметь разные результаты. Например, компьютер с включенным Caps Lock находится в специальном режиме: все набираемые буквы будут отображаться как заглавные. Ввод буквы при включенном Caps Lock имеет другой эффект, чем при выключенном.Или в режиме отслеживания изменений Microsoft Word все ранее сделанные изменения и комментарии видны (тогда как в обычном режиме по умолчанию они не отслеживаются и не отображаются).
С таким пониманием «режима» и «диалога» мы можем легко определять модальные диалоги.
Определение : Модальное диалоговое окно — это диалоговое окно, которое появляется поверх основного содержимого и переводит систему в специальный режим, требующий взаимодействия с пользователем. Этот диалог отключает основное содержимое до тех пор, пока пользователь явно не взаимодействует с модальным диалоговым окном.
Модальный диалог похож на мою кошку Эмму, которая мяукает в 7 утра каждое утро, предлагая мне покормить ее. Возможно, я пытаюсь заснуть или готовиться к новому дню, но моя кошка встает передо мной, а затем мяукает все громче и непрерывно, пока я не посмотрю на нее. Я должен прекратить то, что я делаю, чтобы немедленно обратиться к кошке, если я когда-нибудь надеюсь закончить свою задачу. Иногда она решает сделать это в 3 часа ночи, пока мы спим. Если у нас останутся гости, это может раздражать и смущать. (В защиту моей кошки, как только я ее кормлю, она очень спокойная и у нее милый и общительный характер.)
Напротив, немодальных (или немодальных ) диалоговых окон и окон не отключают основное содержимое: отображение диалогового окна не изменяет функциональность пользовательского интерфейса. Пользователь может продолжить взаимодействие с основным контентом (и, возможно, даже переместить окно, свернуть его и т. Д.), Пока диалог открыт. Продолжая нашу аналогию с кошкой, немодальный диалог подобен котенку, который терпеливо сидит возле обеденного стола во время еды, ожидая случайного падения остатков еды со стола.Когда Эмма делает это, я могу есть, разговаривать и наслаждаться ужином, не отвлекаясь. Я могу либо вообще игнорировать ее, либо, как любит делать мой муж, подсовывать ей немного еды под столом ближе к концу трапезы. (Как вы могли заметить, она очень упитана.)
Модальные диалоговые окна изначально предназначались для предупреждения пользователей об ошибке или о каком-либо другом состоянии системы, требующем немедленных действий пользователя. В этих случаях было необходимо, чтобы пользователи были прерваны, чтобы исправить ошибку.Таким образом, размещение диалогового окна в центре экрана в качестве центральной точки интерфейса сделало его очень эффективным. Большим преимуществом таких модальных диалогов было то, что они привлекали внимание пользователей и позволяли им признать проблему и быстро исправить ее.
Однако это первоначальное использование эволюционировало, и теперь модальные диалоги и окна используются убедительно для привлечения внимания пользователя по законным или менее законным причинам.
Недостатки модальных диалогов
Вот некоторые из распространенных проблем, вызываемых модальными диалогами:
- Они требуют немедленного внимания. Модальные окна по своей природе являются обязательными и требуют от пользователя немедленных действий. Поскольку диалоги переводят систему в другой режим, пользователи не могут продолжать то, что они делают, пока они не подтвердят диалог.
- Они прерывают рабочий процесс пользователя. Модальные диалоги заставляют пользователей уходить от задач, над которыми они изначально работали. Каждое прерывание означает потерю времени и усилий не только потому, что пользователи должны обратиться к диалогу, но и потому, что, как только они вернутся к своим исходным задачам, людям придется потратить некоторое время на восстановление контекста.
- Они заставляют пользователей забыть, что они делали. Когда контекст переключается на другую задачу, из-за дополнительной когнитивной нагрузки, накладываемой модальным диалогом, люди могут забыть некоторые детали, связанные с исходной задачей. В этом случае восстановление контекста для исходной задачи может оказаться еще более трудным.
- Они заставляют пользователей создавать и решать дополнительную задачу — закрыть диалог. Когда отображается диалоговое окно, в рабочий процесс пользователя добавляются дополнительные шаги: чтение и понимание диалогового окна, а затем принятие решения по этому диалоговому окну.Это увеличение стоимости взаимодействия может оттолкнуть пользователей, если диалог не является хорошо обоснованным и действительно содержит важную информацию. Позже мы более подробно остановимся на этом вопросе.
- Они блокируют контент в фоновом режиме. Когда диалоговое окно появляется поверх текущего окна, оно может закрывать важное содержимое и удалять контекст. В результате может стать труднее ответить в диалоговом окне, когда в диалоговом окне задается вопрос, связанный с информацией, которая была только что скрыта.
Из-за этих недостатков модальные диалоги становятся проблематичными при использовании для некритических действий.
Рекомендации по использованию модальных диалоговых окон
Когда уместно использовать модальные диалоги? Вот несколько рекомендаций, которые помогут определить, действительно ли необходимы модальные диалоги.
1. Используйте модальные диалоговые окна для важных предупреждений, чтобы предотвратить или исправить критические ошибки.
Всякий раз, когда есть вероятность, что работа пользователей будет потеряна или действие может иметь разрушительные, необратимые последствия, прерывайте пользователей, чтобы избежать катастрофы.
Чтобы определить, какая ошибка является достаточно серьезной, чтобы вызвать модальное диалоговое окно, примите во внимание следующее:
- Будет ли проблему легче или труднее исправить, если внимание пользователей отвлечено от задачи? Всегда полезно предотвратить человеческую ошибку до того, как она случится, если это возможно.Однако после того, как ошибка была сделана, ее может быть проще исправить, если сообщение об ошибке представлено в основном содержимом, а не в модальном диалоговом окне. Например, об ошибке в форме следует сообщать на странице рядом с тем местом, где она произошла, чтобы пользователи могли ссылаться на сообщение об ошибке при устранении проблемы. Но сообщение пользователю о том, что его компьютер будет перезагружен через 10 секунд, можно отобразить в модальном диалоговом окне, чтобы убедиться, что пользователь заметил это сообщение.
- Ошибка необратимая? Необратимые ошибки часто приводят к потере информации, что может быть особенно опасным для сложных и трудоемких задач.Например, невозможность добавить товар в корзину может быть досадной ошибкой для бизнеса электронной коммерции, но не необратимой для пользователей, если они не заметят тонкого уведомления (они могут повторить свое действие, если им действительно нужен товар). С другой стороны, перезапись файла или невозможность сохранить изменения в сотнях слайдов — это необратимые действия, поэтому прерывание очень необходимо и часто приветствуется.
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"
указывает на идентификатор модального
«Модальная» часть:
Родительский Класс Класс Атрибут Класс Часть «Модальное содержимое»: Класс Класс Класс Измените размер модального окна, добавив Добавьте класс размера к элементу По умолчанию модальные окна среднего размера. Для получения полной информации обо всех модальных параметрах, методах и событиях перейдите на наш
Модальный справочник Bootstrap JS. Мэтт Кронин — заядлый графический дизайнер, веб-дизайнер / разработчик, программист какао, фотограф, цифровой художник и тому подобное.Еще ему нравится писать, и он …
Больше о
Мэтт
↬ Веб-дизайн — это, по сути, организация информации в удобочитаемом, удобном, функциональном и доступном формате. Хорошая организация контента имеет решающее значение, и вам нужен прочный макет, на котором вы можете построить веб-сайт. Вы можете использовать многочисленные элементы и структуры интерфейса для организации контента, такие как слайдеры контента на основе jQuery и модальные окна , которые в основном представляют собой окна, плавающие над страницей.
Модальное окно имеет много преимуществ.Например, когда модальное окно содержит элемент меньшего размера, пользователю не нужно загружать совершенно новую страницу только для того, чтобы получить к ней доступ (другой способ добиться того же эффекта, например, используя вкладки на основе AJAX). Предоставляя модальные окна, вы повышаете удобство использования своего веб-сайта. Необходимость загружать страницы снова и снова будет раздражать большинство пользователей, поэтому избегать этого — определенно хорошо. Модальные окна также позволяют сэкономить место, избавившись от крупных элементов, которые не обязательно должны быть на главной странице. Например, вместо того, чтобы размещать на странице полное видео, вы можете просто предоставить ссылку, миниатюру или какую-либо кнопку.В этой статье мы рассмотрим более лучших практик и тенденций для работы с модальными окнами и их создания. Мы также предоставим множество примеров хорошо сконструированных модальных окон и несколько скриптов, которые помогут вам начать их создание. Веб-дизайн — это, по сути, организация информации в удобочитаемом, удобном, функциональном и доступном формате. Хорошая организация контента имеет решающее значение, и вам нужен прочный макет, на котором вы можете построить веб-сайт. Вы можете использовать многочисленные элементы и структуры интерфейса для организации контента, такие как слайдеры контента на основе jQuery и модальные окна , которые в основном представляют собой окна, плавающие над страницей. Модальное окно имеет много преимуществ. Например, когда модальное окно содержит элемент меньшего размера, пользователю не нужно загружать совершенно новую страницу только для того, чтобы получить к ней доступ (другой способ добиться того же эффекта, например, используя вкладки на основе AJAX). Предоставляя модальные окна, вы повышаете удобство использования своего веб-сайта. Необходимость загружать страницы снова и снова будет раздражать большинство пользователей, поэтому избегать этого — определенно хорошо. Модальные окна также позволяют сэкономить место, избавившись от крупных элементов, которые не обязательно должны быть на главной странице.Например, вместо того, чтобы размещать на странице полное видео, вы можете просто предоставить ссылку, миниатюру или какую-либо кнопку. В этой статье мы рассмотрим лучших практик и тенденций для работы и создания модальных окон . Мы также предоставим множество примеров хорошо сконструированных модальных окон и несколько скриптов, которые помогут вам начать их создание. Возможно, вас заинтересуют следующие статьи по теме: Модальные окна — отличный структурный элемент, но они не подходят для каждого типа контента или мультимедиа.Вот несколько элементов, для которых вы, , должны рассмотреть использование модальных окон. Наиболее очевидное использование модальных окон — это лайтбоксы, которые демонстрируют изображения и видео в чистом и удобном виде. Используя лайтбокс для изображений, пользователям не нужно загружать новую страницу только для просмотра одного изображения или видео. Модальные окна также экономят место в макете содержимого, позволяя отображать только эскиз изображения или видео, которые открывают модальное окно при нажатии.Используя миниатюру вместо всего элемента, вы занимает гораздо меньше места, а макет выглядит более организованным. Кроме того, вы обычно размываете или затемняете фон за модальным окном, делая акцент на самом изображении или видео, тем самым создавая отличную среду, в которой посетители сайта могут просматривать мультимедиа. Дополнительные сведения о затемнении и размытии фона модального окна см. В описанных ниже методах стилизации. При использовании лайтбокса для галереи изображений обязательно свяжите каждое изображение с одним и тем же лайтбоксом, предоставив кнопки «Далее» и «Назад», чтобы пользователи могли легко перемещаться по набору изображений.В этом случае пользователю не нужно закрывать и снова открывать модальное окно для просмотра каждого изображения в галерее. Часто можно увидеть контактные формы, содержащиеся в модальных окнах. Для этой цели хорошо подходят модальные окна, потому что вам не нужно создавать полную страницу для функции. С точки зрения удобства использования важно, чтобы контактные формы были доступны сразу же и их было легко найти. Благодаря плавающему окну контактные формы легко доступны на каждой странице. Контактные формы, как правило, небольшие, поэтому они хорошо впишутся в эти окна. Вместо того, чтобы создавать отдельную страницу для пользователей, чтобы они могли войти и зарегистрироваться на вашем веб-сайте, вы можете использовать модальное окно, которое на самом деле часто используется для этой цели. Такой подход делает форму доступной на каждой странице для облегчения доступа. Вы можете включить ссылку на окно входа в систему в заголовке сайта. Если вы хотите предупредить пользователей о критической функции или выполняемом действии, лучший способ сделать это — через модальное окно.Когда модальное окно открывается на странице, пользователь не может игнорировать его, потому что оно появляется прямо в середине экрана, прямо там, где пользователь смотрит. Кроме того, остальной контент будет затенен и отключен, поэтому пользователь не сможет делать что-либо еще, пока не взглянет на окно и не нажмете кнопку, чтобы закрыть его. На скриншоте ниже вы можете увидеть модальное окно, используемое для предупреждения пользователей о загрузке. Обратите внимание, что вы не должны использовать модальное окно в качестве альтернативного всплывающего окна.Обязательно предупреждайте своих посетителей только в том случае, если произошло что-то важное для текущего сеанса просмотра. Во многих ситуациях простой блеклый блок в макете будет работать лучше, чем модальное окно. Дополнительные элементы справки и подсказки не важны для функциональности и навигации по веб-сайту, поэтому вы не хотите, чтобы они занимали место и мешали содержанию. В любом случае не все пользователи хотят их использовать. Однако они должны быть удобно расположены для тех, кто действительно хочет их использовать, поэтому кажется разумным отображать элементы справки и подсказки в модальных окнах.Пользователи могут легко открывать и закрывать их, не мешая контенту и функциональности. Вот хороший пример элемента справки в плавающем окне. Это окно намного меньше, чем другие, которые мы видели; но он содержит аналогичные функции. Например, полупрозрачная рамка для визуального разделения и кнопка «выход» (закрыть) в правом верхнем углу. Это менее распространенная практика, но иногда вы будете видеть модальные окна, содержащие поля поиска.Функция расширенного поиска может занимать довольно много места, поэтому, чтобы большое поле поиска не занимало место у содержимого, вы можете поместить его в плавающее окно. Вы можете увидеть это на практике на скриншоте ниже. Иногда вам нужно встроить файлы на ваш веб-сайт, например PDF-файл вашего резюме. Вместо того, чтобы предоставлять ссылку, по которой пользователи могут щелкнуть, чтобы загрузить PDF-файл на свой компьютер, или внедрить PDF-файл каким-либо другим способом, вы можете использовать модальное окно для той же цели.Таким образом, PDF-файл можно легко просматривать, не мешая пользователю работать с сайтом. Размывая фон, вы также фокусируетесь на PDF-файле, что повышает удобство использования. Ниже приводится список практик и тенденций удобства использования и стилизации, которые следует учитывать при создании модальных окон. Для удобства использования и стилизации наиболее важным является размытие страницы за плавающим окном.Вы увидите, что это практикуется почти везде, чаще всего с лайтбоксами для мультимедиа. Затеняя страницу, вы привлекаете все внимание пользователя к плавающему окну. Если фон не исчезает, пользователь может даже не сразу понять, что окно «парит» над страницей и не является частью основного макета. Внешний вид окна, физически плавающего над страницей, также придает вашему сайту размер. Выглядит чище и устраняет путаницу. В целом, затухание обеспечивает столь необходимое разделение между окном и страницей, улучшая функциональность и удобство использования. Убедитесь, что затемнение сильное, но оставьте небольшую непрозрачность, чтобы пользователь знал, что страница не исчезла. Например, подойдет черный переход с непрозрачностью около 75%. Но для веб-сайтов с белым фоном, затемните страницу белым с небольшой непрозрачностью и используйте тени. Иногда вы видите модальное окно, которое не затемняет всю страницу, а вместо этого имеет сильную тень под ним, чтобы добавить размер. Это создает тот же эффект и обеспечивает аналогичное визуальное разделение.Вы можете увидеть, как идеально используется эта техника на скриншоте ниже. Для улучшения функциональности всегда размещайте кнопку выхода в верхнем углу окна. Стандартной практикой является использование простой круглой кнопки с графическим изображением «x», которая понятна и довольно очевидна для пользователя. В показанном ниже лайтбоксе четко видна кнопка выхода. Другие способы разрешить пользователям закрывать модальные окна — это позволить им щелкнуть за пределами окна на странице позади, щелкнуть отображаемый элемент в модальном окне или один раз нажать клавишу Escape. Эффекты перехода — это небольшие детали, которые выглядят очень красиво, если все сделано правильно. Один из хороших эффектов перехода для модальных окон — постепенное появление и исчезновение. Но не переусердствуйте, чтобы не раздражать пользователей. Сделайте выцветание коротким, но слегка заметным. В приведенном ниже примере размытый серый фон постепенно появляется и исчезает, создавая отличный эффект. Когда вы начинаете процесс интеграции модальных окон, вы, вероятно, захотите что-то на основе чего строить.Вот 11 отличных скриптов и подключаемых модулей jQuery, на которых будут построены ваши модальные окна. У каждого есть свои уникальные особенности и функции, так что проверьте их все. Необычный лайтбокс
Это один из лучших плагинов jQuery для лайтбоксов. Он хорошо оформлен и очень функциональный. Он имеет чистый стиль, функции маркировки и интеграцию с веб-сайтом, а также работает с AJAX. лайтбокс 2
Это оригинальный скрипт лайтбокса, созданный только для изображений. Он просто оформлен и поддерживает просмотр наборов изображений. Facebook Image / Content Viewer
Вот отличный сценарий, основанный на плавающем окне Facebook. Оно поддерживает изображения и контент и оформлено в стиле известного окна Facebook. Woork Mootools Lightbox
В этом отличном руководстве от Woork показано, как создать простой скрипт для лайтбокса. Скрипт включает функции набора изображений и функции этикеток. nyroModal подключаемый модуль jQuery
Этот простой оконный плагин поддерживает все типы сценариев мультимедиа и файлов, включая AJAX.Он также имеет отличные эффекты отображения / скрытия. Диалоговое окно предупреждения jQuery
Этот плагин jQuery предназначен для предупреждений и диалоговых окон. Он имеет множество функций и отлично работает для отправки сообщений пользователям. LightWindow
Вот комплексный сценарий лайтбокса со многими функциями, такими как встраивание PDF, поддержка нескольких галерей изображений, реализация SWF и многое другое. Класс окна прототипа
Еще один подробный набор скриптов с различными функциями, такими как диалоговые окна, окна входа в систему, окна содержимого AJAX, лайтбоксы изображений и многое другое. ThickBox 3.1
Один из самых популярных инструментов для лайтбоксов — ThickBox. Он работает с изображениями, встроенным контентом и AJAX. prettyPhoto
Хорошо оформленный лайтбокс с изображениями, который прекрасно работает с наборами изображений. jQuery Expose
Это немного отличается от сценария модального окна. Он предоставляет выбранные элементы HTML. Когда вы щелкаете конкретный элемент, остальная часть страницы исчезает. Это отличная альтернатива модальному окну: оно по-прежнему затемняет страницу, чтобы сосредоточить внимание на элементе. Grooveshark
Grooveshark — это хорошо спроектированное и стильное приложение, и модальные окна не являются исключением. Модальное окно с затемненной страницей используется для функций входа в систему и регистрации. Digg
Digg — еще один сайт, созданный пользователями, с функциями входа и регистрации в плавающем окне. Ссылка для входа находится в шапке сайта. Обратите внимание, что вместо затенения и тени используется полупрозрачная граница.Граница обеспечивает более визуальное разделение. Трейлеры фильмов Apple
Apple использует модальные окна во многих местах. Здесь вы можете увидеть окно, используемое для просмотра трейлеров фильмов. Окно построено так, чтобы большие видеофайлы не влияли на производительность окна. Apple iMac: Галерея дизайна
Еще один пример модальных окон на веб-сайте Apple. У них чистый, простой стиль с сильной падающей тенью для визуального разделения. Шпионаж
Еще один хороший пример графического лайтбокса.В этом случае изображение простирается до края окна, а кнопка выхода накладывается прямо на изображение. Здесь нет необходимости в рамке из-за сильного цветового контраста. Дайлайт 3
Хороший пример окна с затемненным фоном. Здесь несколько страниц контента объединены в одном модальном окне. Behance
Еще одна контактная форма, на этот раз со знакомым элементом «Отправить другу», который обычно помещается в модальное окно. Поскольку у веб-сайта в основном темный фон, для разделения используется светлая полупрозрачная рамка. Facebook
Очень узнаваемое модальное окно Facebook. Он содержит информацию, связанную с элементом справки в форме регистрации. Опять же прочная полупрозрачная рамка. KISSmetrics
Вот отличная форма входа в модальное окно. Форма хорошо стилизована и содержит элементы справки для повышения удобства использования: то, что функция входа в систему находится в модальном окне, не означает, что вы можете пренебречь удобством использования. Зал Nasi Briyani
Еще одна форма входа, эта немного другая.Вместо полного модального окна это просто всплывающее окно с небольшой формой. Pixelight Creative
Лайтбоксы на сайте портфолио фрилансера. Когда вы щелкаете по одному из элементов портфолио, в лайтбоксе открывается увеличенное изображение. Capo
Еще одно хорошо оформленное окно, это видео с обзором программного обеспечения, что является обычной практикой. Здесь также есть простая рамка с небольшой тенью. Принять идеи
Это плавающее окно прикреплено к окну поиска.Когда вы вводите запрос, результаты отображаются в самом модальном окне. Окно имеет базовые функции, включая кнопку выхода и границу. Типографский настольный справочник
Очень простое модальное окно с сильной тенью, которая добавляет много глубины. Веб-приложение Evernote
На этом снимке экрана показано предупреждение, которое вы получаете при открытии веб-приложения Evernote. Обратите внимание, как страница сильно тускнеет, и все внимание сосредоточено на содержимом окна. Айсберг
Еще одна форма регистрации в плавающем окне. У этого нет ни затемнения, ни тени, но есть граница для разделения. Viewzi Корпоративный
Красиво оформленное модальное окно. Обратите внимание на большую чистую кнопку выхода в верхнем углу, щедрые отступы в окне и полупрозрачный фон. Почтовый шимпанзе
Этот лайтбокс имеет полупрозрачную рамку, и страница исчезает. Резуматор
Обратите внимание на то, насколько сильно фон изображения контрастирует с фоном страницы.Здесь используется этикетка, но она не прикрепляется к окну, что создает очень красивый вид. Приложение для оформления заказа
Модальное окно с хорошо оформленным изображением. Это окно имеет небольшую тень для добавления глубины и сплошную границу для большего разделения и кадрирования изображения. Pixelmator
Еще один пример приятного оповещения о загрузке. Это предупреждение появляется сразу после начала загрузки. Обратите внимание на отличный стиль, например, на небольшую непрозрачность окна. Ballpark
Вот модальное окно для видео, обычное для корпоративных и программных веб-сайтов, таких как этот.Чаще всего вы видите видео QuickTime и SWF в модальных окнах, но это встраивает видео из Vimeo. А также отличный плавный переход. Рюкзак
Еще одно окно с видео. Еще раз обратите внимание, как страница становится светлее, а не темнее. Guifx
Графический лайтбокс для портфолио — всегда отличная идея, если вы хотите включить изображения большего размера, чтобы показать детали своей работы. Вам могут быть интересны следующие статьи по теме: В веб-дизайне и разработке приложений модальное окно — это шаблон взаимодействия с пользователем, который часто используется, чтобы прерывать действия пользователя, привлекая его внимание к чему-то более важному.Иногда также называемое модальным окном, модальным диалоговым окном или просто модальным окном, обычно модальное окно принимает форму графического элемента, который появляется перед всем остальным содержимым страницы. Модальное окно получило свое название от того факта, что запуск окна сопровождается изменением режима. Когда это происходит, области за пределами модального окна деактивируются до тех пор, пока пользователи не отреагируют на инструкции, которые появляются в самом модальном окне, или не закроют окно. Модальные окна обычно запускаются, когда пользователь нажимает на определенный элемент или выполняет определенное действие.Однако, в отличие от многих других методов, предлагающих пользователям ответить на предупреждения, преимущество модального окна состоит в том, что пользователь не теряет свое место на странице. С учетом сказанного, хотя остальная часть страницы остается видимой, когда появляется модальное окно, обычно фон становится темнее, указывая на то, что другие области страницы были деактивированы. Это метод, который привлекает дополнительное внимание к модальному окну, но дает то преимущество, что пользователи по-прежнему могут видеть то, что находится за окном.Это помогает убедить пользователей, что они не потеряли то, над чем они работали до появления модального окна. Противоположностью модального окна является немодальное окно; в этом случае появится окно или окно, не блокируя главное окно. Хотя немодальное окно, вероятно, будет гораздо менее инвазивным для пользователей, вряд ли оно окажется столь же эффективным, как модальное окно, в привлечении внимания пользователя. Модальное окно — это мощный способ предупредить пользователей о важной информации или побудить их выполнить определенное действие.Например, модальные окна часто используются в адаптивном дизайне для доставки предупреждений, подтверждений, привлечения внимания пользователя к важной информации, которую в противном случае они могли бы упустить из виду, или для того, чтобы сообщить им о любых побочных эффектах, которые могут иметь их действия. Точно так же модальные окна могут использоваться, когда перед выполнением определенной задачи требуется дополнительная информация, например, когда пользователю предлагается ввести свой пароль или другую информацию для входа. Модальные окна могут быть полезны в привлечении безраздельного внимания пользователя, но они не лишены недостатков.Наиболее очевидным из них является нежелательное прерывание взаимодействия с пользователем. Здесь, однако, важно подумать, какой может быть альтернатива. Если бы та же самая информация или пользовательская подсказка могли быть переданы менее инвазивным образом, то, несомненно, действительно было бы лучше принять этот другой курс действий. Однако, если единственная альтернатива модальному окну будет заключаться в том, что пользователь выполняет действие, противоречащее его собственным интересам — например, безвозвратное удаление файлов, — тогда очевидно, что модальное окно будет полностью оправдано, независимо от прерывания. Между тем, некоторые утверждают, что из-за чрезмерного использования модальные окна теперь имеют лишь ограниченную эффективность в привлечении внимания пользователя.
.modal
определяет содержимое
.fade
добавляет эффект перехода, который затемняет модальное окно.
и прочь. Удалите этот класс, если вам не нужен этот эффект. role = "dialog"
улучшает доступ для
люди, использующие программы чтения с экрана. .modal-dialog
устанавливает правильную ширину и поля
модальный.
class = "modal-content
»
стили модальных (граница, цвет фона и т. д.). Внутри этого
.modal-header
используется для определения стиля заголовка
модальный.
внутри заголовка имеет атрибут data-dismiss = "modal"
, который
закрывает модальное окно, если вы щелкнете по нему.Класс .close
стилизует кнопку закрытия,
а класс .modal-title
задает для заголовка соответствующую высоту строки. .modal-body
используется для определения стиля тела
модальный. Добавьте сюда любую разметку HTML; абзацы, изображения, видео и т. д. .modal-footer
используется для определения стиля для
нижний колонтитул модального. Обратите внимание, что эта область по умолчанию выровнена по правому краю.
Модальный размер
.modal-sm
класс для
small modals или .modal-lg
class для больших модалов.
.modal-dialog
:
Полная модальная ссылка Bootstrap
Модальные окна в современном веб-дизайне — Smashing Magazine
Об авторе
Когда использовать модальные окна
Лайтбоксы для изображений / видео
Контактные формы
Формы регистрации / входа
Предупреждения / уведомления
Элементы справки / подсказки
Окна поиска
Встраивание PDF-файлов
Практики удобства использования и стилизации
Размытие и исчезновение фона окна
Стратегия выхода: кнопка, щелчок за пределами окна, клавиша выхода
Отключить все остальные функции страницы Отключить все функции страницы за окном. Он должен быть сфокусирован, и никакие кнопки не должны быть доступны, когда модальное окно открыто. Плавающее окно должно быть отделено от остального содержимого, поэтому отключение страницы ниже создает лучшее разделение. Тем не менее, сохранение функциональности прокрутки страницы — хорошая идея, чтобы у пользователей была хотя бы некоторая свобода вернуться к странице, если это необходимо. Использование эффектов перехода
Сценарии, инструменты и подключаемые модули для лайтбоксов и модальных окон
Витрина модальных окон
Дополнительные ресурсы
Модальное окно | Framer
Подробнее о модальных окнах
Что такое модальное окно?
Когда использовать модальные окна?
Недостатки и передовой опыт