Пример: Модальное окно
Модальное окно: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.
Результат примера
В теме «Модальное окно» теория связана с наблюдаемым результатом. Тема «Модальное окно» объединяет визуальный слой, управление фокусом и действие закрытия. Перед переносом «Модальное окно» в проект выполните проверку: проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия.
Сценарий проверки: в адаптивной навигации на экране 320 px.
Базовая разметка и стили
<dialog aria-labelledby="modal-title">
<h2 id="modal-title">Настройки</h2>
<button type="button">Закрыть</button>
</dialog>Как устроен «Модальное окно»
При разборе «Модальное окно» отделите исходное условие от результата. В теме «Модальное окно» нативный dialog создаёт ожидаемую модель диалога, а showModal ограничивает взаимодействие с фоном. Затем для «Модальное окно» проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия; важно исключить риск: одного высокого z-index недостаточно для доступного модального окна.
- Проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия применительно к теме «Модальное окно».
- Сопоставьте результат «Модальное окно» с целью «разделить смысловую структуру, раскладку и интерактивное состояние» и объясните каждое использованное условие.
- Повторите проверку «Модальное окно» с другими данными и убедитесь, что исключён риск: одного высокого z-index недостаточно для доступного модального окна.
Адаптация примера
Соберите «Модальное окно» в минимальном компоненте. Для «Модальное окно» выполните предметную проверку: проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия. Затем замените демонстрационные данные «Модальное окно» реальными.
Для «Модальное окно» выбирайте самый простой вариант, который сохраняет смысл и требуемое поведение. Критерий готовности «Модальное окно»: проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия.
Перед переносом в проект
Одного высокого z-index недостаточно для доступного модального окна — это предметный риск для «Модальное окно»; Загрузка тяжёлого ресурса до того, как он нужен пользователю при использовании «Модальное окно».
Фиксированные размеры, которые перестают вмещать реальное содержимое; для «Модальное окно» проверьте это отдельно, демонстрационные тексты и неиспользуемые правила.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.