Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 10 августа 2026 г.
HTML:
HTML: <dialog>: модальное окно без единой строки JS-костылей Коллеги, признавайтесь — сколько раз вы писали модалку на div с классом modal-overlay, вешали z-index: 9999, ловили баги с фокусом и блокировкой скролла? А потом ещё и aria-modal прикручивали для доступности. Знакомо? А теперь забудьте. У нас есть <dialog>. И в 2026 году он поддерживается всеми актуальными браузерами. Как это работает на практике: <dialog id="myDialog"> <h2>Подтвердите действие</h2> <p>Удалить проект безвозвратно?</p> <form method="dialog"> <button value="cancel">Отмена</button> <button value="confirm">Удалить</button> </form> </dialog> <button onclick="myDialog.showModal()">Открыть</button> Всё. Никаких оверлеев вручную. showModal() vs show(): — showModal() — модальный режим: блокирует скролл, затемняет фон через ::backdrop, фокус ловится внутри, Escape закрывает окно. Бесплатно, из коробки. — show() — немодальный режим, как всплывающая панель. Три вещи, которые делают правильно: 1. Форма с method="dialog" закрывает окно и возвращает returnValue кнопки. Не нужен close() вручную. 2. Стилизуем ::backdrop для затемнения: dialog::backdrop { background: rgb(0 0 0 / 0.5); } 3. Не ставим display: none на <dialog> по умолчанию — браузер сам управляет видимостью. Хотите анимацию появления — используйте @starting-style. Частая ошибка в проде: открывают модалку через show() и удивляются, что фон скроллится. Если нужна блокировка — только showModal(). Почему это важно для SEO и доступности: поисковики и скринридеры понимают семантику. <dialog> — это не «ещё один div», а явный сигнал: здесь модальный контент. Меньше JS — быстрее загрузка, лучше показатели Core Web Vitals. Внедряйте, коллеги. Нативные элементы экономят часы. Вот так. Идем кодить дальше! 🚀 #вебразработка #webdev #webdevelopment #frontend #backend #fullstack #созданиесайтов #php #js #html #css #mysql #seo #сео #ВебМастерская #СтудияАбрамова #АбрамовВеб