title: Close a div by clicking outside
body: <p>I want to hide a div by clicking on the close link in it, <strong>or</strong> by clicking anywhere outside that div.</p>
  
  <p>I am trying following code, it opens and close the div by clicking close link properly, but if I have problem to close it by clicking anywhere outside the div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>$(".link").click(function() {
    $(".popup").fadeIn(300);
  }
  
  );
  $('.close').click(function() {
    $(".popup").fadeOut(300);
  }
  
  );
  $('body').click(function() {
    if (!$(this.target).is('.popup')) {
      $(".popup").hide();
    }
  }
  
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;a href="#" class="link"&gt;Open&lt;/a&gt;
    &lt;div class="popup"&gt;
      Hello world
      &lt;a class="close" href="#"&gt;Close&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/LxauG/" rel="noreferrer">http://jsfiddle.net/LxauG/</a></p>