Модальное окно Modal

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

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

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

Если важно оставить контекст страницы, лучше использовать сайдпейдж.

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

Модальное окно может состоять из:

• Шапки — заголовка и крестика,
• Контента,
• Подвала — терминальной зоны с кнопками.

Если модальное окно предназначено для выполнения одной конкретной задачи, она должна быть отражена в заголовке. Заголовок должен быть кратким (1 — 3 слова) и являться названием процесса или объекта.

Неправильно

Правильно

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

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

Чаще всего в модальном окне есть минимум два действия:

1. Целевое действие, сохраняет проделанную работу или подтверждает вызванную ранее команду.
2. Действие отмены или закрытия — закрывает модальное окно не выполняя целевое действие.

Действия расположены слева направо. Чем правее действие — тем оно менее важное.

Дополнительные кнопки и ссылки располагайте справа.

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

Также модальное окно закрывается по нажатию клавиши Esc на клавиатуре.

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

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

Если пользователь изменил данные, то всегда уточняйте у него — сохранить данные или уйти без сохранения. Больше советов по работе с данными форм в гайде Сохранение данных.

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

По горизонтали модальное окно позиционируется по центру. По вертикали — по центру и на 10 % смещено к верхней части окна браузера.

Когда высота модального окна почти равна высоте окна браузера, задайте верхний отступ в 40 px. Это предотвратит прилипание окна к верхней границе экрана.

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

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

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

Прокрутка

Во время прокрутки модальное окно занимает всю высоту окна без отступов, а после прокрутки до нижнего края — позиционируется с отступом 40 px от нижнего края страницы.

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

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

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

Если поверх модального окна открывается ещё одно, то затемнение не множится, а все открытые ранее модальные окна помещаются под него.

Неправильно

Правильно

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

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

Если смысл третьей кнопки сильно отличается от остальных, то отодвиньте её.

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

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

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

При открытом модальном окне нажатие Tab не переводит фокус на элементы страницы, фокус переходит только по элементам модального окна, включая крестик.

Клавиша Esc закрывает модальное окно.

Модальное окно без заголовка:

Модальное окно без кнопок:

Обычно это информационное окно, которое можно только закрыть.

Модальное окно с терминальной плашкой:

Модальное окно без терминальной плашки:

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

Неправильно