title: Hide a div when clicked outside of it
body: <p>This question has been asked multiple times, however none of the answers seem to work for me.</p>
  
  <p>The css of the div is as follows:</p>
  
  <pre><code>#info{
    display: none;
    position: fixed;
    z-index: 500;
    height: 50%;
    width: 60%;
    overflow: auto;
    background: rgba(187, 187, 187, .8);
  }
  </code></pre>
  
  <p>I tried to use the following code:</p>
  
  <pre><code>$("#info").click(function(e){
    e.stopPropagation();
  });
  
  $(document).click(function(){
    $("#info").hide();
  });
  </code></pre>
  
  <p>as well as this code:</p>
  
  <pre><code>$(document).mouseup(function (e){
      var container = $("#info");
  
      if (container.has(e.target).length === 0) {
          container.hide();
      }
  });
  </code></pre>
  
  <p>Yet whenever i click on the div it also disappears, no clue why but it does.<br/>
  Any thing else that might work? </p>