How to Close a Modal Window when users Click Outside it, with vanilla JavaScript

Learn how to close a modal window, or any UI element, when the user clicks outside of it, with vanilla JavaScript.

Modal popups are generally annoying, especially when they take up your entire screen. It’s especially annoying when they occur within seconds of you entering the website. It’s stupid, and it’s bad UX design.

Some websites take it to the next level and decide to make the close modal (X) button so small and oddly positioned that you have just enough time to get really pissed while solving the puzzle that you might forget why you went to that website in the first place.

Let’s fix it.

HTML: a simple modal window

Add the following code to your HTML document:

<main>
  <div class="modal">
    <button class="button-close-modal">X</button>

    <h2>Subscribe to my Newsletter</h2>

    <p>Get access to exclusive content that only share with my email list</p>

    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" />
  </div>
</main>

CSS: simple modal & button styling

.modal {
  padding: 2rem;
  border: 1px solid #eee;
  width: max-content;
  position: fixed;
  right: 0;
  bottom: 0;
  max-width: 100%;
}

.button-close-modal {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  margin-left: auto;
}

JavaScript: detect all clicks on document

The following JavaScript code will close the modal window if the user either clicks outside of the modal element, or if they click on the X button:

document.addEventListener(
  "click",
  function(event) {
    // If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
    if (
      event.target.matches(".button-close-modal") ||
      !event.target.closest(".modal")
    ) {
      closeModal()
    }
  },
  false
)

function closeModal() {
  document.querySelector(".modal").style.display = "none"
}

Get all the code here.

What happens in the code:

• First, we set up a click event listener on the document object. This means that any click, anywhere on the HTML document is registered, and now we can run functions for every click inside the curly braces { .. }.
• Then we set up two ways/targets for closing the modal window, either with a button click or with a click outside of the modal window.
• Inside the if statement we say “if the target either matches the button (matches(".button-close-modal")) or (||) the target is not happening on the modal window !event.target.closest(".modal"), then call the closeModal() function.
• When the closeModal() function is called, it selects the .modal class selector and hides it with display = 'none'.