How to make modal close on click outside

131,590

Solution 1

This seemed to be the code that worked out for me in the end:

$(document).click(function (e) {
    if ($(e.target).is('#openModal')) {
        $('#openModal').fadeOut(500);
    }

});

$("#modalNo").click(function () {
    $("#openModal").fadeOut(500);


});
$(".close").click(function () {
    $("#openModal").fadeOut(500);
});
$(".close-circle").click(function () {
    $("#openModal").fadeOut(500);
});

Solution 2

Use the parent node #openModal (container) instead of #popUpForm (form) :

$('body').click(function (event) 
{
   if(!$(event.target).closest('#openModal').length && !$(event.target).is('#openModal')) {
     $(".modalDialog").hide();
   }     
});

Solution 3

Adding to this for future readers.

Another way to dismiss the modal when clicking outside involved taking advantage of the bubbling nature of the javascript events.

In a typical modal HTML structure

<body>
  <div id="root">
    -- Site content here
  </div>
  <div id="modal-root">
    <div class="modal"></div>
  </div>
</body>

clicking on .modal will cause the click event to propagate like this .modal -> #modal-root -> body while clicking outside the modal will only go through #modal-root -> body.

Since we can stop the propagation of click events completely, and if that does not interfere with any other code, we only need to listen for click events in both .modal and #modal-root. A "modal-root" click will dismiss the modal, and a "modal" click will stop propagating the click event so never reaches the "modal-root".

For extra clarity, here's the code working in codepen.io: https://codepen.io/nbalaguer/pen/PVbEjm

Solution 4

This is working for me: I have an image inside of the modal window, so if someone click outside the image (centered):

html code:

<div id="modal_div"><img id="image_in_modal_div" src="image.jpg" /></div>

ccs code:

#modal_div {
        display: none;
          position: fixed; 
        z-index: 1; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
          background-color: transparent;
}

#image_in_modal_div {
       left: 50%;
       top: 30%;
       position: absolute;
}

mixed jquery and javascript code:

$( document ).ready(function() {

    $("#element_that_opens_modal").click(function(){
        $("#modal_div").show();
    });

    window.onclick = function(event) {
       if (event.target.id != "image_in_modal_div") {
          $("#modal_div").hide();
       }
    }

});

Solution 5

Simple:

var images_modal = document.getElementById('images-model-div');

var videos_modal = document.getElementById('video-model-div');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

   if (event.target == images_modal) {

      images_modal.style.display = "none";

    }

    if (event.target == videos_modal) {

      videos_modal.style.display = "none";

    }

}

View more solutions

131,590

Jack H

I am a front-end web developer with some backend knowledge aswell. I have a working knowledge of HTML5, CCS3, JavaScript, JQuery, AJAX, NPM, PHP, MySQL, Adobe Creative Suite.

Updated on July 05, 2022

Comments

Jack H almost 2 years

I have used this JavaScript below:

$('body').click(function() {
  if (!$(this.target).is('#popUpForm')) {
    $(".modalDialog").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="openModal" class="modalDialog">
    <div class="modalClose">
      <a href="#close" title="Close" class="close-circle" style="color:white; text-decoration:none; font-size:14px;"></a>
      <div id="signup-header">
        <h4>Request a brochure, with a free demo</h4>
        <h5>Please Fill in the form below: </h5>
      </div>

      <form id="popUpForm" class="tryMeForm" name="" onsubmit="return formCheck(this);" method="post" action="">
        <div class="InputGroup">
          <input type="text" name="name" id="name" value="" placeholder="First Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="lastname" id="lastname" value="" placeholder="Last Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Email" id="Email" value="" placeholder="Email Address*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Phone" id="Phone" value="" placeholder="Phone Number*" />
        </div>
        <div class="InputGroup">
          <textarea name="message" id="message" class="" placeholder="How we can help?"></textarea>
        </div>
        <div class="submit">
          <input class="button_submit1 button-primary button1" type="submit" value="Submit" />
        </div>

      </form>
    </div>
  </div>
</body>

This allows me to close the modal when clicking outside of it. However, it closes even when I click inside as well. How can I make it close only on outside and the close button, but not inside, so the users can still enter their details?

Ryan almost 8 years

this will work if the length of the children of element #openModal is exactly one. It is actually a little more complicated than just checking the e.target
Zakaria Acharki almost 8 years

Thanks @self for your intervention, you could use closest() to cover the part of children/parent... (Updating my answer).
Martin James almost 6 years

I found out that the modal plugin I use, developed by a potato, was using e.stopPropagation() to achieve the same goal, which inevitably prevented events being fired for anything inside of the modal! I used your solution to fix what the potato coded.
Kout over 4 years

It is nice approach, though things get complicated if you have some clickable elements in the model (send button, link to terms and conditions etc.).
mjsarfatti over 4 years

@Kout it still works because clicks on inner elements are not influenced if you place your listener on the element itself.
Ybri almost 3 years

Nice but it does not handle the following cases: - mouse down on the outside and mouse up on the modal should not close - mouse down on the modal and mouse up on the outside should not close