Как закрыть модальное окно при клике вне его?

Добавить обработчик события click на документ (document). В обработчике проверять, был ли клик совершен вне модального окна, сравнивая event.target с модальным окном или его содержимым. Если клик был вне, скрывать модальное окно.

// Предположим, у вас есть элемент модального окна и кнопка для его открытия
const modal = document.getElementById('myModal');
const openModalBtn = document.getElementById('openModalBtn');

// Функция для закрытия модального окна
function closeModal() {
  modal.style.display = 'none';
}

// Функция для открытия модального окна (для примера)
// openModalBtn.onclick = function() {
//   modal.style.display = 'block';
// }

// Обработчик клика на элементе span (или другом элементе для закрытия внутри модалки)
// const closeBtn = document.querySelector('.close'); // Если есть элемент для закрытия внутри модалки
// if (closeBtn) {
//   closeBtn.onclick = closeModal;
// }

// Обработчик клика на всем документе
document.addEventListener('click', function(event) {
  // Проверяем, был ли клик вне модального окна
  // Используем contains() для проверки, находится ли target внутри modal
  // Также проверяем, что клик не был на самой кнопке открытия модального окна,
  // чтобы предотвратить мгновенное закрытие при открытии.
  if (event.target === modal) {
    closeModal();
  }
});

// Альтернативный подход: Проверка, не является ли target частью модального окна
// document.addEventListener('click', function(event) {
//   if (!modal.contains(event.target) && event.target !== openModalBtn) {
//     closeModal();
//   }
// });

// Дополнительно: закрытие по клавише Esc
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closeModal();
  }
});

Также можно использовать обработчик на оверлей (фоновый элемент), который покрывает весь экран, если таковой используется для модального окна. Клик по оверлею тоже будет закрывать модальное окно.

// Предположим, есть оверлей
const modalOverlay = document.getElementById('modalOverlay');
const modal = document.getElementById('myModal');

// Функция для закрытия модального окна
function closeModal() {
  modal.style.display = 'none';
  modalOverlay.style.display = 'none'; // Скрыть оверлей тоже
}

// Обработчик клика на оверлее
// Предполагаем, что оверлей виден только когда модалка открыта
if (modalOverlay) {
  modalOverlay.addEventListener('click', function() {
    closeModal();
  });
}

// Если клик внутри модального окна не должен его закрывать,
// можно остановить всплытие события click внутри модалки.
// modal.addEventListener('click', function(event) {
//   event.stopPropagation(); // Останавливает всплытие события на родительские элементы (включая оверлей)
// });