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

Короткий ответ

Да, попап без JavaScript возможен с использованием HTML и CSS. Основные подходы: псевдокласс :target для показа/скрытия блока при переходе по якорю, чекбокс-хак с :checked и label, или CSS-анимации с :hover. Однако такие попапы имеют ограничения: нет программного контроля, сложности с закрытием по клику вне области и с доступностью (focus trapping, ARIA-атрибуты). Для production-решений с хорошим UX JavaScript обычно необходим.

Подробное объяснение

Попап (модальное окно) без JavaScript реализуется чисто CSS-средствами за счёт использования состояний элементов, управляемых пользовательским взаимодействием:

• :target: при клике на ссылку с href="#popup" браузер устанавливает фокус на элемент с id="popup", и псевдокласс :target активирует его отображение. Закрытие - через ссылку на другой якорь или #.
• :checked: скрытый чекбокс, чьё состояние переключается через label. CSS-правило .checkbox:checked ~ .popup управляет видимостью. Закрытие - повторный клик по label или дополнительный label для снятия checked.
• :focus-within: попап показывается, пока фокус находится внутри контейнера. Закрытие - клик вне области или Tab.
• :hover: показ при наведении, но это не модальное окно, а тултип.

Ограничения: нет возможности закрыть по Escape, нет focus trapping (фокус может уйти за пределы попапа), сложно реализовать анимацию появления/исчезновения с плавностью, нет поддержки ARIA-атрибутов динамически. Для accessibility требуется дополнительная разметка (role="dialog", aria-modal), которую браузер не обновляет без JS.

На практике

На собеседовании senior-уровня важно показать понимание trade-off: чисто CSS-решение - это академический интерес или ограниченный use-case (например, прототип, лендинг без JS). В реальных проектах попап требует:

• программного управления (открыть/закрыть из любого места)
• обработки клавиатуры (Escape, Tab trapping)
• блокировки скролла body
• управления фокусом при открытии/закрытии
• поддержки стека модалок

Без JS эти задачи решаются частично или костыльно. Интервьюер ожидает, что кандидат назовёт CSS-подходы, но аргументированно объяснит, почему для продакшена нужен JavaScript.

Пример кода

HTML
<!-- :target approach -->
<a href="#popup">Открыть попап</a>
<div id="popup" class="popup">
  <div class="popup-content">
    <p>Содержимое</p>
    <a href="#">Закрыть</a>
  </div>
</div>

<style>
.popup {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}
.popup:target {
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-content {
  background: white;
  padding: 2rem;
}
</style>

HTML
<!-- :checked approach -->
<input type="checkbox" id="popup-toggle" hidden>
<label for="popup-toggle">Открыть</label>
<div class="popup">
  <div class="popup-content">
    <p>Содержимое</p>
    <label for="popup-toggle">Закрыть</label>
  </div>
</div>

<style>
.popup {
  display: none;
  /* ... */
}
#popup-toggle:checked ~ .popup {
  display: flex;
}
</style>

Как отвечать на собеседовании

1. Сразу подтвердить возможность: "Да, можно через :target или :checked".
2. Кратко описать механику каждого подхода.
3. Перейти к ограничениям: отсутствие focus trapping, Escape, ARIA, программного контроля.
4. Упомянуть, что для простых статичных страниц это допустимо, но для SPA или сложных интерфейсов - нет.
5. Если спросят про accessibility - объяснить, что без JS нельзя динамически установить aria-modal, управлять фокусом, и screen reader не поймёт, что это модалка.
6. Закончить выводом: "Чистый CSS - это трюк, но не production-решение".

Что проверяет интервьюер

• Понимание CSS-селекторов и псевдоклассов (:target, :checked, ~, +).
• Умение оценивать границы применимости технологии (CSS vs JS).
• Знание accessibility и UX-паттернов для модальных окон.
• Способность аргументировать выбор подхода в контексте реального проекта.
• Отсутствие догматизма: кандидат не отрицает CSS-решение, но и не предлагает его как универсальное.

Типичные ошибки

• Утверждение, что попап без JS невозможен в принципе.
• Предложение только одного подхода (например, только :target без упоминания :checked).
• Игнорирование accessibility: "Работает же, зачем ARIA?".
• Попытка использовать :hover как полноценный попап (это тултип, не модалка).
• Отсутствие упоминания проблем с закрытием (например, при :target нужно кликнуть именно на ссылку, а не на overlay).
• Предложение display: none/block через :focus без учёта, что фокус теряется при клике вне.