Arrow_down_24.svgchevron-right-s-16icon-bars1-72icon-bars10-72icon-bars11-72icon-bars12-72icon-bars13-72icon-bars2-72icon-bars3-72icon-bars4-72icon-bars5-72icon-bars6-72icon-bars7-72icon-bars8-72icon-bars9-72storybook-16-solid

Определение

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

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

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

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

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

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

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

Построение

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

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