我在下面使用过这个JavaScript:
$('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>这允许我在点击它外面时关闭模态.但是,即使我点击内部也会关闭.如何才能使其仅在外部和关闭按钮上关闭,而不是在内部关闭,这样用户仍然可以输入他们的详细信息？
Zak*_*rki 12
使用父节点#openModal(容器)而不是#popUpForm(窗体):
$('body').click(function (event)
{
if(!$(event.target).closest('#openModal').length && !$(event.target).is('#openModal')) {
$(".modalDialog").hide();
}
});
希望这可以帮助.
小智 8
为未来的读者添加此内容。
在外部单击时关闭模态的另一种方法是利用 javascript 事件的冒泡特性。
在典型的模态 HTML 结构中
<body>
<div id="root">
-- Site content here
</div>
<div id="modal-root">
<div class="modal"></div>
</div>
</body>
单击.modal将导致单击事件像这样传播，.modal -> #modal-root -> body而在模态外单击只会通过#modal-root -> body.
由于我们可以完全停止点击事件的传播，并且如果这不会干扰任何其他代码，我们只需要在.modal和 中监听点击事件#modal-root。“模态根”点击将关闭模态，“模态”点击将停止传播点击事件，因此永远不会到达“模态根”。
为了更加清晰，这里是 codepen.io 中的代码：https ://codepen.io/nbalaguer/pen/PVbEjm
这似乎是最终对我有用的代码：
$(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);
});
小智 6
这对我有用：我在模态窗口中有一个图像，所以如果有人点击图像外（居中）：
html代码：
<div id="modal_div"><img id="image_in_modal_div" src="image.jpg" /></div>
cc代码：
<div id="modal_div"><img id="image_in_modal_div" src="image.jpg" /></div>
混合 jquery 和 javascript 代码：
$( 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();
}
}
});
小智 6
简单的：
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";
}
}
| 归档时间： |
|
| 查看次数： |
39912 次 |
| 最近记录： |