Дизайн модальных окон и всплывающих элементов сайта
Модальные окна используют слишком часто и не там. Прежде чем проектировать modal, стоит проверить: можно ли решить ту же задачу inline, на отдельной странице или через drawer? Modal блокирует весь интерфейс — это оправдано только когда пользователь должен принять решение или выполнить действие прямо сейчас, не уходя с текущего контекста.
Когда modal, когда нет
Modal подходит для:
- Подтверждения деструктивного действия (удалить, архивировать)
- Быстрого просмотра детали без перехода на страницу (lightbox, предпросмотр)
- Короткой формы (2–4 поля: создать тег, изменить email)
- Критического уведомления, требующего реакции
Вместо modal лучше использовать:
- Inline-редактирование — для изменения одного поля прямо в таблице
- Отдельная страница — для длинных форм (больше 6–8 полей)
- Drawer (боковая панель) — для деталей объекта при сохранении списка
- Popover / Dropdown — для выбора из списка, фильтров, меню
Анатомия модального окна
Стандартная структура:
- Overlay — полупрозрачный фон (rgba(0,0,0,0.4–0.6)), блокирует клики, клик по нему закрывает modal
- Контейнер — белый (или bg-surface в dark mode), border-radius 8–16px, box-shadow
- Хедер — заголовок + кнопка закрытия (×) в правом верхнем углу
- Тело — контент, с scroll при переполнении
- Футер — кнопки действий (правое выравнивание): отмена + основное действие
Размеры контейнера:
- Small: 400px — подтверждения, короткие уведомления
- Medium: 560px — формы, детали
- Large: 720–800px — предпросмотр, сложные формы
- Fullscreen — для мобильных устройств всегда
Доступность и поведение
Модальные окна требуют правильной реализации accessibility:
- Focus trap: при открытии фокус перемещается в modal, Tab циклически ходит внутри
- Esc закрывает modal
- При закрытии фокус возвращается на элемент, который открыл modal
-
aria-modal="true",role="dialog",aria-labelledbyна заголовок
В дизайне это означает: кнопка закрытия должна быть первым или последним фокусируемым элементом (зависит от конвенции), заголовок — обязателен (даже если визуально скрыт через sr-only).
Анимация
Modal появляется с анимацией — это снижает «прыжок» и даёт пользователю момент для ориентации. Рекомендуемые параметры:
- Duration: 150–200ms для появления, 100–150ms для скрытия
- Overlay: fade in/out opacity
- Контейнер: scale(0.95) → scale(1) + opacity 0 → 1
Длиннее 250ms — modal ощущается медленным. Короче 100ms — нет смысла, переход незаметен.
Всплывающие элементы: Popover, Dropdown, Tooltip
В отличие от modal, эти компоненты не блокируют интерфейс и не требуют явного закрытия.
Dropdown — открывается под/над триггером, содержит список действий или опций. Закрывается кликом вне области или выбором пункта.
Popover — более сложный, чем tooltip. Может содержать форму, список, подтверждение. Позиционируется относительно триггера с flip-логикой (меняет сторону, если не помещается в viewport).
Для дизайна важно предусмотреть все 4 позиции (top, bottom, left, right) и их вариации (start, center, end) — итого 12 вариантов позиционирования. В Figma это делается через Variants с Auto Layout.
Сроки
Дизайн полного набора modal и всплывающих компонентов (modal трёх размеров, drawer, popover, dropdown, confirmation dialog) — 3–5 дней: проектирование паттернов, все варианты и состояния, анимационные спецификации, адаптив.