如何在外面点击使模态关闭 [英] How to make modal close on click outside
本文介绍了如何在外面点击使模态关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在下面使用过这个JavaScript：
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?
推荐答案
<这似乎是最终为我制定的代码：
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);
});
这篇关于如何在外面点击使模态关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
