Модальное окно на JavaScript: фокус, Escape и возврат

24.01.2026 Полезные материалы

Небольшое модальное окно с видимым фокусом на кнопке закрытия

Модальное окно — это поведение фокуса и взаимодействия, а не только прямоугольник поверх затемнения. Для простой задачи начните с нативного dialog. Он снимает часть обязанностей, которые пришлось бы вручную реализовывать у обычного div, но всё равно требует понятного заголовка и закрытия.

Окно dialog с явным закрытием

index.html

<!doctype html>
<html lang="ru"><meta charset="utf-8"><title>Модальное окно</title>
<button id="open" type="button">Открыть условия</button>
<dialog id="details" aria-labelledby="dialog-title">
<h2 id="dialog-title">Условия учебного события</h2>
<p>Это пример окна, без регистрации и платежей.</p>
<button id="close" type="button" autofocus>Закрыть</button>
</dialog>
<script>
const opener = document.querySelector('#open');
const dialog = document.querySelector('#details');
opener.addEventListener('click', () => { if (!dialog.open) dialog.showModal(); });
document.querySelector('#close').addEventListener('click', () => dialog.close());
dialog.addEventListener('close', () => { if (opener.isConnected) opener.focus(); });
</script></html>

Откройте файл в поддерживающем браузере. Кнопка показывает окно через showModal, фокус попадает на явно выбранную кнопку закрытия. Закрыть можно кнопкой или штатным Escape. После close фокус возвращается к исходной кнопке, если она ещё находится в документе. Это выбранная простая схема для одного неизменного инициатора.

Окно проверяется по действиям
Что сравнить	На что смотреть	Что сделать
Открытие	showModal вместо одного open	Фон страницы становится недоступным для обычного взаимодействия
Название	aria-labelledby указывает на заголовок	Название объясняет задачу окна
Начальный фокус	autofocus на кнопке в коротком примере	Выбирать по содержимому конкретного окна
Закрытие	Кнопка и Escape	Есть способ без физической клавиатуры

Не дублируйте всё поведение вручную

MDN описывает различие show и showModal: немодальный и модальный режимы нельзя считать одинаковыми. Не добавляйте самостоятельную ловушку Tab поверх нативного механизма без причины. Не назначайте tabindex самому dialog ради случайной правки фокуса. Если содержание длинное или действие рискованное, начальную позицию нужно продумать отдельно, а не всегда ставить на подтверждение.

Открыть окно с клавиатуры.
Пройти Tab и Shift+Tab внутри.
Закрыть Escape и отдельной кнопкой.
Проверить, куда возвращается фокус после каждого способа.

Пример не закрывается по клику на затемнение: это не заявленная функция. Добавлять её можно только с понятным решением о случайных нажатиях и незавершённом вводе. Также проверьте поддержку в вашем окружении. Нативный элемент помогает, но наличие dialog не заменяет проверку доступности всего пользовательского сценария.