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

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

Раньше в Контуре этот компонент назывался Лайтбоксом, но мы переименовали его, чтобы не было разночтений. В профессиональном сообществе «модальное окно» более распространенный и устоявшийся термин.

Когда использовать

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

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

Описание работы

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

Содержание

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

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

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

Заголовок

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

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

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

Действия

Чаще всего в модальном окне есть минимум два терминальных (закрывающих окно) действия:

  1. Черная кнопка — действие по умолчанию, сохраняет проделанную работу или подтверждает вызванную ранее команду. Такую кнопку нельзя называть «ОК».
  2. Кнопка отмены — закрывает модальное окно не выполняя основное действие, называется «Отменить», не должна называться «Отмена».

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

Закрытие модального окна

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

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

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

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

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

Размер и расположение

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

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

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

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

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

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

Прокрутка

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

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

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

Залипающие панели

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

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

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

Наложение модальных окон

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

Неправильно

Правильно

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

Фокус и работа с клавиатурой

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

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

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

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

Дизайн, размеры и отступы

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

Дополнительные кнопки и ссылки в терминальной плашке:

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

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

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

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

Неправильно

Информационное модальное окно — окно без кнопок: