Menu
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?
606
Another way to dismiss the modal when clicking outside involved taking advantage of the bubbling nature of the javascript events. 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 .
Modal Header You have two options to close this modal: Click on the "x" or click anywhere outside of the modal!
You can do it by creating a div for the modal backdrop which sits adjacent to the modal body. Make it cover the whole screen using position absolute and 100% height and width values. That way the modal body is sitting over the backdrop.
Close Dialog while Click on Outside of Dialog in Vue Dialog component. By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method.
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();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
