Диалоговое окно с focus trap, Portal в document.body и анимацией входа/выхода. Блокирует скролл страницы. Закрывается по Escape, клику на бэкдроп или кнопке ×.
При открытом Modal фокус циклически обходит только интерактивные элементы внутри. Shift+Tab работает в обратном направлении. При открытии фокус ставится на первый фокусируемый элемент.
Escape закрывает Modal (если closeOnEscape=true). Backdrop-click закрывает если closeOnBackdrop=true. Кнопка × видима по умолчанию.
Modal рендерится в document.body через Portal вне иерархии DOM. Исключает z-index конфликты. Backdrop всегда поверх интерфейса (z-index: 900).
Modal обязателен для необратимых действий (удаление записи, перевод средств). Reversible actions (фильтры, сортировка) не требуют Modal. Включать error code в сообщения об ошибках.
При открытии устанавливается overflow: hidden на body. Восстанавливается при закрытии. Предотвращает прокрутку страницы позади Modal.
Backdrop: фиксированный rgba(0,0,0,0.4) — одинаков в обеих темах. Surface: --ds-modal-bg адаптируется. Close-кнопка: nba-40 override в dark.
Средства спишутся после подтверждения банком-получателем. Операция необратима.
Сумма: 1 250 000,00 ₽ · Получатель: ООО «Меркурий» · Счёт: 40702810‥1234
Это базовый Modal без footer. Закройте его кнопкой ×, клавишей Escape или кликом по бэкдропу.
Modal без заголовка. Кнопка × остаётся в правом верхнем углу хедера.
Ширина: var(--ds-modal-sm-w) = 400px. Для лаконичных подтверждений.
Ширина: var(--ds-modal-md-w) = 560px. Стандартный размер по умолчанию.
Ширина: var(--ds-modal-lg-w) = 800px. Для форм с несколькими полями, таблиц данных.
100vw x 100vh. Нет border-radius, нет тени. Для сложных рабочих процессов, редакторов, детальных отчётов.
Клик по бэкдропу не закрывает этот Modal. Используется для форм с несохранёнными данными или обязательных шагов.
Клавиша Escape не закрывает этот Modal. Закрыть можно только кнопкой × или кликом по бэкдропу.