title: jQuery - have popup box appear on screen regardless of how low they scroll
body: <p>I'm trying to create a popup box on a list of items that goes very much to the bottom of the browser.</p>
  
  <p><strong>I want the POPUP to be in the center of the page where the user is at regardless of how low they scrolled</strong> </p>
  
  <p>i have to use POSITION ABSOLUTE not FIXED</p>
  
  <p>but when i use POSITION ABSOLUTE the popup always appears on top and i know its due to my top: 0 </p>
  
  <pre><code>.lightbox-container{
    border: solid red 1px;
    width: 100px;
    height: 40px;
    background: yellow;
    position: absolute;
    top: 0;
   }
  </code></pre>
  
  <p>I want to use something like scrollTop or one of those to get the popup to always stay in the users viewpoint regardless of how low they scrolled </p>
  
  <pre><code>$('a').on('click', function(e){
    var lightBox = $('&lt;div class="lightbox-container"&gt; &lt;p&gt;click to remove&lt;/p&gt;');
    lightBox.appendTo('body');
    $('.lightbox-container').on('click', function(e){
      $(this).remove();
    });
  });
  </code></pre>
  
  <p>here is the fiddle im working on <a href="http://jsfiddle.net/2RNAN/1/" rel="nofollow">http://jsfiddle.net/2RNAN/1/</a></p>
  
  <p>I know there are other posts about this but im very new to jquery and cant seem to get it working.  </p>