> Зачем на обертке модального окна навешивать id и проверять таргет клика для закрытия модалки (JavaScript)

Этот подход (часто называемый "click outside" или "overlay click") используется для реализации закрытия модального окна при клике на затемнённую область (оверлей) вокруг него, но не на само содержимое модалки.

Зачем нужен id на обёртке?
Обёртка (обычно <div class="modal-overlay">) получает уникальный идентификатор, чтобы в обработчике клика можно было однозначно отличить её от внутренних элементов. Без id пришлось бы проверять классы или другие атрибуты, что менее надёжно при вложенных модалках или динамических классах.

Проверка таргета клика
Когда пользователь кликает, событие всплывает до обёртки. В обработчике мы проверяем event.target: если он совпадает с элементом, имеющим этот id (то есть клик пришёлся именно на оверлей, а не на дочерний блок с контентом), то закрываем модалку. Это предотвращает ложное закрытие при клике на кнопки, текст или другие элементы внутри модального окна.

Пример реализации:

JAVASCRIPT
const overlay = document.getElementById('modalOverlay');
overlay.addEventListener('click', (e) => {
  if (e.target.id === 'modalOverlay') {
    closeModal();
  }
});

Альтернативы
Можно использовать e.target === e.currentTarget, но id явно указывает на конкретный элемент, что удобно при нескольких модалках на странице или при необходимости точного селектора в CSS/JS.