Как сделать попап без JavaScript и возможно ли это

Что проверяют

Знаете ли вы, что умеет сама платформа без скриптов, и понимаете ли цену старых CSS-трюков. Следом почти всегда спрашивают про доступность: как такой попап закрывается с клавиатуры и что происходит с фокусом.

Как отвечать

Коротко: да, возможно, и сегодня для этого есть штатный инструмент. Дальше варианты от современного к устаревшему:

• Popover API: атрибут popover на элементе и кнопка с popovertarget="id". Браузер показывает элемент в верхнем слое (top layer), поэтому z-index не нужен. В режиме popover="auto" закрытие по Esc и клику мимо работает из коробки, фон стилизуется через ::backdrop. Поддерживается всеми основными браузерами с 2024 года;
• <details> и <summary>: раскрывающийся блок со встроенной семантикой и клавиатурой, годится для простых выпадающих панелей;
• :target: ссылка href="#popup" и правило #popup:target { display: block }. Работает, но меняет хеш в адресе, добавляет запись в историю и дёргает прокрутку;
• чекбокс-хак: скрытый input type="checkbox", <label> в роли кнопки и селектор :checked ~ .popup. Состояние не попадает в URL, зато семантика кнопки теряется.

Важная оговорка: popover не модальный, остальная страница остаётся интерактивной. Настоящее модальное окно с инертным фоном это <dialog> и showModal(), то есть JavaScript. Вариант без скрипта, атрибуты commandfor и command="show-modal" (Invoker Commands), поддерживается пока не везде, перед использованием проверьте caniuse.

Где спотыкаются

Пишут «без JS» и тут же вешают на крестик onclick. Закрытие тоже должно работать без скрипта: в варианте с :target это ссылка на #, у popover кнопка с popovertargetaction="hide".

Не думают о доступности. У :target и чекбокс-хака нет закрытия по Esc, фокус не переходит в окно и не возвращается обратно, скринридер не узнаёт о диалоге.

Не знают про Popover API и строят всё на :target. В 2026 году это звучит как ответ из старой статьи, хотя упомянуть трюк как исторический вариант полезно.