How to detect clicks outside of a css modal? [duplicate]

Im using a very simple and clean code to render a modal in my page:

<div class="modal">I'm the Modal Window!</div>

.modal {
    /* some styles to position the modal at the center of the page */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    line-height: 200px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: #f1c40f;
    text-align: center;

    /* needed styles for the overlay */
    z-index: 10; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);

Is there a clean and reliable way to detect when somebody clicks outside of the modal?

Probably the simplest way is to bind click event to body and see if it comes from the element ( which has parent (walk up the tree with closest method) .modal:

$(document).click(function(e) {
    if (!$('.modal').length) {
        alert('click outside!');


By the way, overlay made with outline is an interesting idea, but it’s not real overlay, as it still allows to interact with underlying page elements. Here is an example of the overlay made with div container covering entire page: This one will prevent page interaction when modal is visible.

And here is an example of how open/close functionality can be use together:

WithOut jQuery

document.addEventListener('click', function (e) {
  if( === 'modal'){
     alert('clicked in');
  }else {
    alert('clicked out');
}, false);

check it out:,css,js,output

With the help of a javascript framework this is quite easy.

Follow these steps:

  1. Attach a click event to the document which closes or hides the modal.
  2. Attach a separate click event to the window which stops click propagation.
Read More:   How to disable paste protection in Mozilla Firefox Developer Console?



Warning! Stopping propagation can introduce strange behaviour

Dfsq answer will work fine.. but if you want something to do with dialog boxes you may have a look at jQuery ui dialog boxes. It gives you many options with dialog boxes which you can configure as per your needs.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts