Что такое модальный диалог

Что такое модальный диалог

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

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

5 янв. 2021

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Какая разница между диалоговыми и модальными окнами

Собственно не могу понять, есть ли какая нибудь разница? Или это одно и тоже? В Bootstrap классы элемента модалки вот такие modal-dialog . Я думал Dialog — то что выводится по центру А Modal прилипает к границам вьюпорта

Отслеживать
задан 8 апр 2022 в 13:04
7,001 4 4 золотых знака 29 29 серебряных знаков 62 62 бронзовых знака

В UI модальный диалог не дает взаимодействовать с другими компонентами пока он открыт. А немодальных диалогов может быть несколько одновременно открыто и с ними можно взаимодействовать как и с другими компононентами

8 апр 2022 в 13:36

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Терминологически от просто диалогового окна можно отказаться (от диалога в нём). От модального — нет. Например: https://www.quora.com/Whats-the-difference-between-a-modal-and-dialog Но если быть совсем точным, то под dialog подразумевают немодальный диалог, а под modal — модальный диалог.

Отслеживать
ответ дан 8 апр 2022 в 13:10
4,925 6 6 золотых знаков 11 11 серебряных знаков 29 29 бронзовых знаков

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Класс CDialog можно использовать для управления двумя типами диалоговых окон:

• Модальные диалоговые окна, которые требуют от пользователя ответа перед продолжением программы
• Бессерверные диалоговые окна, которые остаются на экране и доступны для использования в любое время, но разрешают другие действия пользователя

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

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

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

Что такое модальный диалог

Модальное диалоговое окно должно быть выскакивающим окном, имеющим Системное меню, строку заголовка, и жирную рамку; то есть, шаблон блока диалога должен установить стили WS_POPUP, WS_SYSMENU, WS_CAPTION и DS_MODALFRAME. Хотя прикладная программа может определять и стиль WS_VISIBLE, Windows всегда показывает модальное диалоговое окно независимо от того, устанавливает ли шаблон диалогового окна стиль WS_VISIBLE. Приложение не должно создавать модальное диалоговое окно, имеющее стиль WS_CHILD. Модальный блок диалога с этим стилем отключает сам себя, не допуская какого-либо последующего ввода данных из связанной с ним прикладной программы.

Прикладная программа создает модальное диалоговое окно, используя или функцию DialogBox или DialogBoxIndirect. DialogBox требует названия или идентификатора ресурса, содержащего шаблон блока диалога; DialogBoxIndirect требует дескриптора объекта памяти, содержащего шаблон диалогового окна. Функции DialogBoxParam и DialogBoxIndirectParam также создают модальные блоки диалога; они идентичны выше упомянутым функциям, но, когда диалоговое окно создается, передают заданный параметр для процедуры блока диалога.

При создании модального диалогового окна, Windows делает его активным окном. Диалоговое окно остается активным до тех пор, пока процедура блока диалога не вызовет функцию EndDialog, или пока Windows не активизирует окно в другой прикладной программе. Ни пользователь, ни прикладная программа не могут сделать окно владельца активным, пока модальное диалоговое окно не разрушено.

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

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

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

Примечание: здесь и далее ОС – оперативная система.

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

Прикладная программа разрушает модальное диалоговое окно, используя функцию EndDialog. В большинстве случаев, процедура диалогового окна вызывает EndDialog тогда, когда пользователь выбирает из системного меню блака диалога команду Закрыть (Close), или выбирает в диалоговом окне кнопку ОК или Отменить (Cancel). Блок диалога может возвратить значение через функцию DialogBox (или другие создающие функции), определяя значение при вызове функции EndDialog. Windows возвращает это значение после разрушения диалогового окна. Большинство прикладных программ использует это возвращаемое значение, чтобы определить, успешно ли завершил блок диалога свою задачу или она была отменена пользователем. Windows не возвращает управление из функции, которая создает блок диалога до тех пор, пока процедура диалогового окна не вызовет функцию EndDialog.