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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прокрутка

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

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

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

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

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

Неправильно

Правильно

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

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

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

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

В некоторых случаях полезно красить иконку.

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

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

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

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

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

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

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

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

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

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

Неправильно

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