how to make a modal disappear if it is clicked outside

Question

function modalopen(){
        document.getElementById("overlay").style.display='block';
        document.getElementById("modal").style.display='block';
    }
        function modalclose(){
        document.getElementById("overlay").style.display='none';
        document.getElementById("modal").style.display='none';
    }

.closex{
             border: none;
            background-color: transparent;
             font-weight: bold;
        }
        .open{
             border: none;
            background-color: dodgerblue;
            border-radius: 14px;
            width: 150px;
            height: 40px;
            font-size: 20px;
    }
        body{
            background-color: whitesmoke;
        }
        .modal{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 200ms ease-in-out;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 500px;
    max-width: 80%;
    font-family: Arial;
    border: 1px solid white;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
   -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
        }

@-webkit-keyframes animatezoom {
  from {-webkit-transform: translate(-50%,-50%) scale(0)} 
  to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
  
@keyframes animatezoom {
  from {transform: translate(-50%,-50%) scale(0)} 
  to {transform: translate(-50%,-50%) scale(1)}
}

        .mhead{
            border-bottom: 1px solid rgba(0,0,0,0.5);
            padding: 15px 15px 15px;
            font-size: 22px;
        }
        .mbody{
            padding: 15px 15px 15px 15px;
            font-size: 19px
        }
        .close{
            margin-left: 330px;
        }
        #overlay{
             display: none;
    position: fixed;
        top: 0;
    left: 0;
    right: 0;
    bottom: 0;
background-color: rgba(0,0,0,0.5);
    pointer-events: none;
        }

<body>
        <div id="overlay"></div>
        <div class="modal" id="modal">
            <div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">&times;</button></span></div>
            <div class="mbody">
            welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat 
            praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione 
            ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o 
            relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure 
            exquisitaque ad multos singulis cernantur ab aliquip consectetur fore 
            voluptatibus coniunctione tractavissent quo id nostrud reprehenderit 
            cohaerescant si sunt fore velit illum iis eram proident si expetendis varias 
            exercitation officia anim eram firmissimum domesticarum sint et nisi duis 
            coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam 
            ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum 
            graviterque
                </div>
        </div>
        <div align="center">
    <button onclick="modalopen()" class="open">Open Modal</button>
            </div>
    </body>

From the above code if you click on the button it makes a modal appear by setting it's display to block, now what i want is that when you click outside the modal the modal will disappear, can anyone help with a code for that. i have tried

    var modal = document.getElementById('modal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

but that doesn't work
i have checked other question on stack overflow about this but none of them work

Does this answer your question? [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — someone, Jun 25 '20 at 18:32

Reyno · Accepted Answer · 2020-06-25T12:53:18.220

You already have all the pieces, you just need to put it all together. Remove the pointer-events: none; from the overlay CSS so we can click on it. Then add the onclick="modalclose()" to your overlay. Thats it.

function modalopen(){
        document.getElementById("overlay").style.display='block';
        document.getElementById("modal").style.display='block';
    }
        function modalclose(){
        document.getElementById("overlay").style.display='none';
        document.getElementById("modal").style.display='none';
    }

.closex{
             border: none;
            background-color: transparent;
             font-weight: bold;
        }
        .open{
             border: none;
            background-color: dodgerblue;
            border-radius: 14px;
            width: 150px;
            height: 40px;
            font-size: 20px;
    }
        body{
            background-color: whitesmoke;
        }
        .modal{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: 200ms ease-in-out;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 500px;
    max-width: 80%;
    font-family: Arial;
    border: 1px solid white;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
   -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
        }

@-webkit-keyframes animatezoom {
  from {-webkit-transform: translate(-50%,-50%) scale(0)} 
  to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
  
@keyframes animatezoom {
  from {transform: translate(-50%,-50%) scale(0)} 
  to {transform: translate(-50%,-50%) scale(1)}
}

        .mhead{
            border-bottom: 1px solid rgba(0,0,0,0.5);
            padding: 15px 15px 15px;
            font-size: 22px;
        }
        .mbody{
            padding: 15px 15px 15px 15px;
            font-size: 19px
        }
        .close{
            margin-left: 330px;
        }
        #overlay{
             display: none;
    position: fixed;
        top: 0;
    left: 0;
    right: 0;
    bottom: 0;
background-color: rgba(0,0,0,0.5);
        }

<body>
        <div id="overlay" onclick="modalclose()"></div>
        <div class="modal" id="modal">
            <div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">&times;</button></span></div>
            <div class="mbody">
            welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat 
            praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione 
            ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o 
            relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure 
            exquisitaque ad multos singulis cernantur ab aliquip consectetur fore 
            voluptatibus coniunctione tractavissent quo id nostrud reprehenderit 
            cohaerescant si sunt fore velit illum iis eram proident si expetendis varias 
            exercitation officia anim eram firmissimum domesticarum sint et nisi duis 
            coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam 
            ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum 
            graviterque
                </div>
        </div>
        <div align="center">
    <button onclick="modalopen()" class="open">Open Modal</button>
            </div>
    </body>

i already tried the onclick but i forgot about the pointer events thanks — , Jun 25 '20 at 12:50

score 0 · Answer 2 · answered Jun 25 '20 at 12:45

You can find where is the click happem, like this

    window.addEventListener("click", function(e) {
      if (document.getElementById("modalWindow").contains(e.target)) {
        alert("clicked inside");
      } else {
        alert("clicked outside");
      }
    });

score 0 · Answer 3 · answered Jun 25 '20 at 13:01

Modals are pretty simple in nature. Most basic example would be consisting of modal itself, close button inside (or sometimes outside modal) and backdrop.

basic modal setup

Now what you want to do is close modal whenever backdrop or close button is clicked. Now there is a design decision to be made, you can include modal inside a backdrop, or keep them on the same level in DOM. From your example I can see that you went with second option. In this case all you need to do is add onClick event to backdrop.

<div id="overlay" onclick="modalclose()"></div>

In case you would have modal inside backdrop you would additionally need to stop event propagation, because any click inside modal would trigger it's parents (including backdrop) onClick events.

var modalElement = document.getElementById('modal');
modalElement.addEventListener('click', function(event){ 
    event.stopPropagation();
});

how to make a modal disappear if it is clicked outside

3 Answers3