如何解决为什么在单击主体之前,jQuery会打开和关闭弹出窗口?
我弹出一个弹出窗口,以便用户可以回复消息。现在,当用户单击<a>
标签时,它会打开弹出窗口,但是如果用户在身体上的任何地方碰到它,它都不会关闭。我尝试使用jquery修复此问题,但单击<a>
标签后,它会保持打开状态,然后立即再次关闭弹出窗口。
我的<a>
标签:
<a class="msg-icon2" onclick="openReplyModal(<?PHP echo $msg_id ; ?>)">
<i class="fas fa-reply"></i>
</a>
我的jquery:
var msg_id;
function openReplyModal(id) {
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
jQuery(document).ready(function($) {
jQuery("body").click(function() {
$("#reply_modal" + msg_id).fadeOut();
});
});
}
我该如何调整代码,以便当用户首次单击该按钮时,它将打开弹出窗口并保持打开状态,除非他单击body
中的任何位置?
这是我从下面的答案中得到的代码:
`function openReplyModal(id,event) {
$(".modal").hide(); // close other modal
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
event.preventDefault();
event.stopPropagation();
}
jQuery(document).ready(function($) {
// click on modal doesn't hide itself
$("body").on("click",".modal",function(e) {
e.stopPropagation();
});
// clicl anywhere else hides all modals
$(window).click(function() {
$(".modal").fadeOut();
});
});`
解决方法
jQuery(document).ready(function ($) {
function openReplyModal(id) {
msg_id = id
$("#reply_modal" + msg_id).addClass('model-open').fadeIn();
}
$('body').click(function (e) {
$('.model-open').removeClass('open').fadeOut();
});
});
,
为所有模态赋予一个通用类,例如class="reply_modal"
。然后,您可以使用一个通用的单击处理程序,当您单击主体时,该处理程序会将它们全部淡出。
模态立即关闭的原因是click
事件从<a>
冒到主体,因此它关闭了模态。我在函数中添加了event.stopPropagation()
,所以它不会冒泡。
使用$(window).click()
检测元素外部窗口中任何位置的点击。参见How do I detect a click outside an element?。
var msg_id;
function openReplyModal(id,event) {
$(".reply_modal").hide(); // close other modal
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
event.preventDefault();
event.stopPropagation();
}
jQuery(document).ready(function($) {
// click on modal doesn't hide itself
$("body").on("click",".reply_modal",function(e) {
e.stopPropagation();
});
// clicl anywhere else hides all modals
$(window).click(function() {
$(".reply_modal").fadeOut();
});
});
.reply_modal {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="msg-icon2" onclick="openReplyModal(1,event)" href="#"> <i class="fas fa-reply">open 1</i></a>
<a class="msg-icon2" onclick="openReplyModal(2,event)" href="#"> <i class="fas fa-reply">open 2</i></a>
<div id="reply_modal1" class="reply_modal">This is modal 1<br>
<input></div>
<div id="reply_modal2" class="reply_modal">This is modal 2<br>
<input></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。