ДокументацияРазделы, компоненты, системы и их подразделы
Modal
Фокусная задача поверх страницы
Blocking overlay
Modal останавливает основной поток ради одного решения
Используйте его для подтверждения критического действия, короткой формы или изолированной задачи. Уведомления, навигацию и дополнительные детали лучше показывать через Feedback, Toast или Drawer.
Подтверждение необратимого действия
Static backdrop не закрывает окно случайным кликом по фону. Решение остаётся явным: отменить или подтвердить.
Удалить проект Atlas?
Проект, его задачи и история будут удалены без возможности восстановления.
HTMLConfirmation Modal
<button data-ox-toggle="modal" data-ox-target="#delete-project">
Удалить проект
</button>
<div
class="ox-modal"
id="delete-project"
data-ox-ui="modal"
data-ox-size="sm"
data-ox-backdrop="static"
>
<div class="ox-modal-dialog">
<header class="ox-modal-header">
<h2 class="ox-modal-title">Удалить проект?</h2>
<button class="ox-modal-close" data-ox-dismiss="modal" aria-label="Закрыть"></button>
</header>
<div class="ox-modal-body">...</div>
<footer class="ox-modal-footer">...</footer>
</div>
</div>Размеры и анимация
Размер выбирают по задаче, а не по количеству свободного места. На мобильном стандартные варианты становятся широкими inset-поверхностями, Full остаётся полноэкранным.
data-ox-size="sm"Короткое подтверждение или простой выбор · до 26rem.data-ox-size="md"Базовый размер для формы или сообщения · до 38rem.data-ox-size="lg"Сложная форма или широкий контент · до 52rem.data-ox-size="full"Полноэкранная изолированная задача.data-ox-animation="slide-up"Анимация по умолчанию.fade · scale · slide-*Также доступны flip, flip-x, flip-y и instant.
Параметры поведения
Modal по умолчанию блокирует фон, удерживает фокус внутри и возвращает его на исходный триггер.
data-ox-backdrop="true"true, false или static; static даёт обратную связь вместо закрытия по фону.data-ox-close-on-backdrop="true"Разрешает закрытие кликом по обычной подложке.data-ox-dismissible="true"Разрешает Escape и закрытие снаружи.data-ox-keyboard="true"Включает обработку Escape.data-ox-focus-trap="true"Удерживает Tab-навигацию внутри dialog.data-ox-restore-focus="true"Возвращает фокус на триггер после закрытия.data-ox-autofocus="true"Фокусирует autofocus, первый доступный элемент или dialog.data-ox-scrollable="false"При true ограничивает dialog и оставляет body прокручиваемым.data-ox-centered="true"Центрирует dialog; false размещает его сверху.data-ox-scroll-lock="true"Блокирует прокрутку фонового документа.data-ox-hash="false"При true синхронизирует открытие с #id окна.data-ox-persistent="false"Не даёт другому Modal автоматически закрыть этот экземпляр.
API, события и доступность
Ядро назначает dialog, aria-modal, inert и связи с заголовком и описанием. Приложению остаётся дать элементам ясный текст и завершить действие.
JavaScriptУправление Modal
import { Modal } from 'okaux/js/app.js';
const element = document.querySelector('#project-form');
const modal = Modal.getOrCreateInstance({ element });
modal.show(trigger);
modal.hide();
modal.toggle(trigger);modal:showПеред открытием; событие можно отменить.modal:shownПосле завершения появления.modal:hideПеред закрытием; событие можно отменить.modal:hiddenПосле завершения скрытия.modal:staticПопытка закрыть static или недоступный для dismiss Modal.role="dialog"Назначается внутреннему .ox-modal-dialog автоматически.aria-labelledbyЯдро связывает dialog с .ox-modal-title.aria-describedbyЯдро связывает dialog с .ox-modal-body.Обычная .rowНе используйте row-bleed внутри прокручиваемого body.Понятный выходОставляйте явную отмену, если задача не обязана завершиться.