title: Set the position of pop up div dynamically
body: <p>I am looking for a solution on how to set the position of the pop up div which is showed by click on an another div but its position depends on where the position of the window is.</p>
  
  <p>Here some examples of my divs: </p>
  
  <pre><code> &lt;div id="header"&gt;&lt;/div&gt;
  
   &lt;div id="open"&gt;Click here to open the popup&lt;/div&gt;
  
   &lt;div id="popup"&gt;
        &lt;div class="popup-wrapper"&gt;
            &lt;div class="content"&gt;
               &lt;h1&gt;TEST&lt;/h1&gt;
            &lt;/div&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>For example:</strong> </p>
  
  <ol>
  <li><p>If the user clicks the <code>#open</code> div to show the <code>#popup</code> div with the position of the browser's window scroll bar in the bottom, I want that <code>#popup</code> div to show at the top of the <code>#open</code> div. </p></li>
  <li><p>However, if the user clicks the '#open' div to show the <code>#popup</code> div with the position of the browser's window on the top, I want that <code>#popup</code> div to show at the bottom of the <code>#open</code> div.   </p></li>
  </ol>
  
  <p>Here is the script that I used:</p>
  
  <pre><code>$("#popup").click(function(e) {
       if ($(e.target).closest(".content" /*or any other selector here*/).length &gt; 0){
           return false;
       }
       $("#popup").fadeOut(200);
       $("body").addClass("no-scroll");
  });
  
  //This is just to open the popup
  $('#open').click(function() {
      $("#popup").show();
  }); 
  </code></pre>
  
  <p>Here is the complete code with css <a href="http://jsfiddle.net/Alkasih/SLW4Z/" rel="nofollow"><strong>FIDDLE</strong></a></p>