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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: LoyaltyLabs

Стек: JavaScript

> Пример ответа

Да, сделать попап без JavaScript возможно, используя только HTML и CSS. Основной способ - через элемент <dialog> с атрибутом open или через чекбокс (<input type="checkbox">) с псевдоклассом :checked и соседним селектором (~).

Пример с <dialog>:

HTML
<dialog open>
  <p>Это попап</p>
  <form method="dialog">
    <button>Закрыть</button>
  </form>
</dialog>

Но такой попап открыт постоянно. Для управления открытием/закрытием без JS используют трюк с чекбоксом:

HTML
<label for="popup-toggle">Открыть попап</label>
<input type="checkbox" id="popup-toggle" hidden>

<div class="popup-overlay">
  <div class="popup">
    <p>Содержимое попапа</p>
    <label for="popup-toggle">Закрыть</label>
  </div>
</div>

CSS:

CSS
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}
#popup-toggle:checked ~ .popup-overlay {
  display: flex;
}

Также можно использовать <details> для простого аккордеона, но это не полноценный попап. Минусы подхода: нет анимаций без JS, сложнее управлять фокусом и доступностью. Для базовых задач - работает.