title: Javascript Modal Popup
body: <p>I'm trying to create a simple modal popup.  I have the CSS done, and the Javascript mostly done.  I'm at the point where I click a button at the button of the page and the popup appears, but it appears at the top of the page.  It appears excatly how it should if you were scrolled all the way to the top of the page.</p>
  
  <p>I however want the modal popup box to appear center based upon the current scroll position.  I also want it to stay centered when I scroll.  As of right now it doesn't float at the center of the screen.</p>
  
  <p>What javascript property do I need to use to adjust the position of the popup div as I scroll.</p>
  
  <p>I've tried, but to no avail:</p>
  
  <pre><code>function showModal(id)
  {
     window.onscroll = function () { document.getElementById(divID).style.top =
                                                 window.pageYOffset || 
                                                 document.body.scrollTop || 
                                                 document.documentElement.scrollTop; };
     document.getElementById(id).style.display = "block";
     document.getElementById(id).style.top =
                   window.pageYOffset || 
                   document.body.scrollTop || 
                   document.documentElement.scrollTop; };
  }
  </code></pre>
  
  <p>I'm using straight vanilla javascript, no jQuery.</p>
  
  <p>TL;DR: I've created a modal popup but it doesn't stay centered when I scroll away from the very top of the page.</p>