Определение

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

Варианты и состояния

Модальные окна бывают:

• пассивные;
• подтверждающие;
• предупреждающие об опасности.

Основные правила

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

• нажимает клавишу  «Esc»;
• нажимает кнопку закрытия «X» в заголовке модального окна;
• нажимает кнопку «Отмена» в модальном нижнем колонтитуле;
• клики вне модального окна.

Построение

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

• заголовок (title) — включает в себя название и кнопку закрытия;
• текст заголовка должен быть кратким (2–4 слова и не более одной строки) с описанием информации или действия модального окна;
• тело (body) — не имеет требований к содержимому и позволяет составить модальное окно по своему усмотрению;
• нижний колонтитул (footer) — содержит все возможные модальные действия, выровненные по ширине модального окна (по умолчанию);
• модальные действия в нижнем колонтитуле показывают пользователям выполнение задачи на родительской, новой странице или на другом этапе модального окна.