通过单击外部关闭 div

我想通过单击其中的关闭链接来隐藏 div，or单击该 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>

Demo: http://jsfiddle.net/LxauG/

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

这不使用任何委托事件到主体级别

Set tabindex="-1"到 DIV .popup （以及样式 CSSoutline: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);
});