26.01.2026 06:43
🏗 Забудьте про z-index: 9999: Нативный <dialog> Мы годами писали сложные велосипеды для модальных окон или тянули тяжелые библиотеки.
🏗 Забудьте про z-index: 9999: Нативный <dialog>
Мы годами писали сложные велосипеды для модальных окон или тянули тяжелые библиотеки. Главная боль кастомных решений - это accessibility (focus trap), закрытие по Esc и вечные войны с контекстом наложения (z-index).
HTML-элемент <dialog> теперь стабилен во всех браузерах и решает эти проблемы на уровне движка.
Почему это Game Changer:
1. Top Layer API: При открытии через .showModal(), элемент помещается в специальный «верхний слой» браузера. Ему плевать на overflow: hidden родителя или низкий z-index контейнера. Он всегда будет поверх всего.
2. Встроенная доступность: Браузер сам запирает фокус внутри окна (focus trap) и обрабатывает нажатие Esc.
3. Магия форм: Форма с method="dialog" закрывает модалку при сабмите без единой строчки JS-обработчика.
Пример (Минимум кода):
<dialog id="confirmModal">
<form method="dialog">
<h3>Удалить продакшн?</h3>
<p>Это действие необратимо.</p>
<button value="cancel">Отмена</button>
<button value="confirm" autofocus>Да, удалить</button>
</form>
</dialog>
const modal = document.getElementById('confirmModal');
// 1. Открываем (добавляет backdrop и блокирует остальную страницу)
modal.showModal();
// 2. Слушаем закрытие
modal.addEventListener('close', () => {
if (modal.returnValue === 'confirm') {
runDeleteScript();
}
});
🎨 Как стилизовать фон?
Забудьте про создание отдельного div для затемнения. Используйте псевдоэлемент:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
backdrop-filter: blur(4px); /* Красивое размытие фона */
}
⚠️ Важный нюанс: Не путайте методы.
▪️ .show() - просто показывает элемент (позционирование absolute, страница скроллится).
▪️ .showModal() - то, что вам нужно (Top Layer, fixed, блокировка фона).
👉 @frontend_1
Мы годами писали сложные велосипеды для модальных окон или тянули тяжелые библиотеки. Главная боль кастомных решений - это accessibility (focus trap), закрытие по Esc и вечные войны с контекстом наложения (z-index).
HTML-элемент <dialog> теперь стабилен во всех браузерах и решает эти проблемы на уровне движка.
Почему это Game Changer:
1. Top Layer API: При открытии через .showModal(), элемент помещается в специальный «верхний слой» браузера. Ему плевать на overflow: hidden родителя или низкий z-index контейнера. Он всегда будет поверх всего.
2. Встроенная доступность: Браузер сам запирает фокус внутри окна (focus trap) и обрабатывает нажатие Esc.
3. Магия форм: Форма с method="dialog" закрывает модалку при сабмите без единой строчки JS-обработчика.
Пример (Минимум кода):
<dialog id="confirmModal">
<form method="dialog">
<h3>Удалить продакшн?</h3>
<p>Это действие необратимо.</p>
<button value="cancel">Отмена</button>
<button value="confirm" autofocus>Да, удалить</button>
</form>
</dialog>
const modal = document.getElementById('confirmModal');
// 1. Открываем (добавляет backdrop и блокирует остальную страницу)
modal.showModal();
// 2. Слушаем закрытие
modal.addEventListener('close', () => {
if (modal.returnValue === 'confirm') {
runDeleteScript();
}
});
🎨 Как стилизовать фон?
Забудьте про создание отдельного div для затемнения. Используйте псевдоэлемент:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
backdrop-filter: blur(4px); /* Красивое размытие фона */
}
⚠️ Важный нюанс: Не путайте методы.
▪️ .show() - просто показывает элемент (позционирование absolute, страница скроллится).
▪️ .showModal() - то, что вам нужно (Top Layer, fixed, блокировка фона).
👉 @frontend_1