title: Click a button to show, elsewhere to hide
body: <p>I looked at similar questions here but non of them really got me anywhere.</p>
  
  <p>So my setup is something like this :</p>
  
  <pre><code>&lt;body&gt;
    ...some code
    &lt;button id="button" onClick="showPopup()"&gt;click me!&lt;/button&gt; 
    &lt;div id="popup"&gt;
      ...stuff
    &lt;/div&gt;
  
    ..some more code
  
  &lt;/body&gt;
  </code></pre>
  
  <p>for my css I have</p>
  
  <pre><code>#popup{
    z-index:2;
    ...other styling
  }
  </code></pre>
  
  <p>while everything else is z-index 1 </p>
  
  <p>and javascript </p>
  
  <pre><code>$("#popup").hide();   //default
  function showPopup(){
     $("#popup").show();
  }
  </code></pre>
  
  <p>I want the popup to show when the button is clicked, and hide when anywhere else is clicked.</p>
  
  <pre><code>$(document).click(function (e){$("#popup").hide();}
  </code></pre>
  
  <p>This won't work because popup is part of the document so when the button is clicked, it shows then hides immediately.
  I also tried adding class and hiding if hasClass but didn't work.
  Also the fact that z-index is different has something to do with it?</p>