Проектування модальних вікон і спливаючих елементів сайту
Модальні вікна використовуються надто часто і не в потрібних місцях. Перед проектуванням 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
- Хедер — заголовок + кнопка закриття (×) у правому верхньому куті
- Тіло — контент, зі скролом при переповненні
- Футер — кнопки дій (вирівнювання вправо): скасування + основна дія
Розміри контейнера:
- 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 днів: проектування паттернів, всі варіанти й стани, специфікації анімацій, адаптивний дизайн.