How to close a modal window when clicking outside of it?

Add a click event handler to the document (document). In the handler, check if the click was outside the modal window by comparing event.target with the modal window or its content. If the click was outside, hide the modal window.

// Assume you have a modal element and a button to open it
const modal = document.getElementById('myModal');
const openModalBtn = document.getElementById('openModalBtn');

// Function to close the modal
function closeModal() {
  modal.style.display = 'none';
}

// Function to open the modal (for example)
// openModalBtn.onclick = function() {
//   modal.style.display = 'block';
// }

// Click handler on the span element (or another element for closing inside the modal)
// const closeBtn = document.querySelector('.close'); // If there is a close element inside the modal
// if (closeBtn) {
//   closeBtn.onclick = closeModal;
// }

// Handler for clicks on the entire document
document.addEventListener('click', function(event) {
  // Check if the click was outside the modal window
  // Use contains() to check if target is inside modal
  // Also check that the click was not on the open button itself,
  // to prevent immediate closing when opening.
  if (event.target === modal) {
    closeModal();
  }
});

// Alternative approach: Check if target is not part of the modal
// document.addEventListener('click', function(event) {
//   if (!modal.contains(event.target) && event.target !== openModalBtn) {
//     closeModal();
//   }
// });

// Additionally: close on Esc key
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closeModal();
  }
});

You can also use a handler on an overlay (background element) that covers the entire screen if used for the modal window. Clicking on the overlay will also close the modal.

// Assume there is an overlay
const modalOverlay = document.getElementById('modalOverlay');
const modal = document.getElementById('myModal');

// Function to close the modal
function closeModal() {
  modal.style.display = 'none';
  modalOverlay.style.display = 'none'; // Hide overlay too
}

// Handler for clicks on the overlay
// Assuming overlay is only visible when modal is open
if (modalOverlay) {
  modalOverlay.addEventListener('click', function() {
    closeModal();
  });
}

// If clicks inside the modal should not close it,
// you can stop event propagation inside the modal.
// modal.addEventListener('click', function(event) {
//   event.stopPropagation(); // Stops event bubbling to parent elements (including overlay)
// });