Как реализовать закрытие модального окна по клику на фон (click outside)?

Концепция закрытия модального окна по клику на фон

Когда пользователь кликает на затемнённый фон (оверлей) модального окна, ожидается, что окно закроется. Это стандартный UX-паттерн, который улучшает взаимодействие с интерфейсом. Реализация основана на обработке событий клика и всплытии событий в DOM.

Как это работает

Оверлей — это родительский элемент, который занимает весь экран. Модальное окно находится внутри оверлея. При клике на оверлей событие всплывает, и мы можем перехватить его на уровне оверлея. Однако клик по содержимому модального окна также всплывает до оверлея, поэтому нужно отличать, был ли клик именно по оверлею, а не по его дочерним элементам.

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

// HTML: <div id="overlay"><div id="modal">...</div></div>

const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');

overlay.addEventListener('click', (event) => {
  // Если кликнули именно по оверлею, а не по модалке
  if (event.target === overlay) {
    closeModal();
  }
});

// Альтернативный подход: остановить всплытие внутри модалки
modal.addEventListener('click', (event) => {
  event.stopPropagation();
});

overlay.addEventListener('click', () => {
  closeModal();
});

Где применяется

• Веб-приложения с модальными окнами, диалогами, попапами.
• Библиотеки UI (React, Vue) часто предоставляют встроенные решения.
• Кастомные компоненты для улучшения UX.

Вывод

Используйте проверку event.target или stopPropagation для надёжного закрытия модального окна по клику на фон. Это простой и эффективный способ улучшить взаимодействие пользователя с интерфейсом.