Question

我希望通过点击其中的关闭链接或来隐藏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>

演示： http://jsfiddle.net/LxauG/

Answer 1

另一种使你的jsfiddle减少错误的方法（需要双击打开）。

这不会将任何委托事件用于正文级别

将tabindex="-1"设置为DIV .popup（以及样式CSS outline:0）

DEMO

$(".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);
});

Answer 2

你需要

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});

Answer 3

我建议使用stopPropagation（）方法，如修改过的小提琴中所示：

Fiddle

$('body').click(function() {
    $(".popup").hide();
});

$('.popup').click(function(e) {
    e.stopPropagation();
});

这样，您可以在单击主体时隐藏弹出窗口，而无需添加额外的if，当您单击弹出窗口时，事件不会通过弹出窗口冒泡到主体。< / p>

Answer 4

你最好选择这样的东西。只需给你要隐藏的div一个id，然后创建一个这样的函数。通过在body上添加onclick事件来调用此函数。

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}

Answer 5

添加一个占据整个窗口大小的透明背景，就在弹出窗口

之前

.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);
});

Answer 6

这个问题可能已经回答here。如事件传播中断可能存在一些潜在问题，正如Philip Walton在this post中所解释的那样。

更好的方法/解决方案是创建自定义jQuery事件，例如clickoutside。 Ben Alman有一篇很棒的帖子（here），解释了如何实现一个（并解释了特殊事件的工作方式），并且他有一个很好的实现（here）。

有关jQuery事件API和jQuery特殊事件的更多阅读：

Answer 7

var modal = document.getElementById("reject-popup");    
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }

}

Answer 8

 //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);
                    }
        });
    });
 });

单击外部关闭div

8 个答案: