我希望通过点击其中的关闭链接或来隐藏div,方法是点击该div之外的任何位置。
我正在尝试关注代码,它会通过正确点击关闭链接打开并关闭div,但如果我有问题要通过点击div之外的任何地方来关闭它。
$(".link").click(function() {
$(".popup").fadeIn(300);
}
);
$('.close').click(function() {
$(".popup").fadeOut(300);
}
);
$('body').click(function() {
if (!$(this.target).is('.popup')) {
$(".popup").hide();
}
}
);
<div class="box">
<a href="#" class="link">Open</a>
<div class="popup">
Hello world
<a class="close" href="#">Close</a>
</div>
</div>
答案 0 :(得分:34)
另一种使你的jsfiddle减少错误的方法(需要双击打开)。
这不会将任何委托事件用于正文级别
将tabindex="-1"
设置为DIV .popup(以及样式CSS outline:0
)
$(".link").click(function(e){
e.preventDefault();
$(".popup").fadeIn(300,function(){$(this).focus();});
});
$('.close').click(function() {
$(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
$(this).fadeOut(300);
});
答案 1 :(得分:23)
你需要
$('body').click(function(e) {
if (!$(e.target).closest('.popup').length){
$(".popup").hide();
}
});
答案 2 :(得分:6)
我建议使用stopPropagation()方法,如修改过的小提琴中所示:
$('body').click(function() {
$(".popup").hide();
});
$('.popup').click(function(e) {
e.stopPropagation();
});
这样,您可以在单击主体时隐藏弹出窗口,而无需添加额外的if,当您单击弹出窗口时,事件不会通过弹出窗口冒泡到主体。< / p>
答案 3 :(得分:1)
你最好选择这样的东西。只需给你要隐藏的div一个id,然后创建一个这样的函数。 通过在body上添加onclick事件来调用此函数。
function myFunction(event) {
if(event.target.id!="target_id")
{
document.getElementById("target_id").style.display="none";
}
}
答案 4 :(得分:1)
添加一个占据整个窗口大小的透明背景,就在弹出窗口
之前.transparent-back{
position: fixed;
top: 0px;
left:0px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
然后点击它,关闭弹出窗口。
$(".transparent-back").on('click',function(){
$('popup').fadeOut(300);
});
答案 5 :(得分:0)
这个问题可能已经回答here。如事件传播中断可能存在一些潜在问题,正如Philip Walton在this post中所解释的那样。
更好的方法/解决方案是创建自定义jQuery事件,例如clickoutside。 Ben Alman有一篇很棒的帖子(here),解释了如何实现一个(并解释了特殊事件的工作方式),并且他有一个很好的实现(here)。
有关jQuery事件API和jQuery特殊事件的更多阅读:
答案 6 :(得分:0)
var modal = document.getElementById("reject-popup");
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
答案 7 :(得分:-1)
//for closeing the popover when user click outside it will close all popover
var hidePopover = function(element) {
var elementScope = angular.element($(element).siblings('.popover')).scope().$parent;
elementScope.isOpen = false;
elementScope.$apply();
//Remove the popover element from the DOM
$(element).siblings('.popover').remove();
};
$(document).ready(function(){
$('body').on('click', function (e) {
$("a").each(function () {
//Only do this for all popovers other than the current one that cause this event
if (!($(this).is(e.target) || $(this).has(e.target).length > 0)
&& $(this).siblings('.popover').length !== 0 && $(this).siblings('.popover').has(e.target).length === 0)
{
hidePopover(this);
}
});
});
});