单击外部关闭div

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()方法,如修改过的小提琴中所示:

小提琴

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

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

这样,您可以在单击主体时隐藏弹出窗口,而无需添加额外的if,当您单击弹出窗口时,事件不会通过弹出窗口冒泡到正文.