Showing a hidden div and centering on screen
<p><strong>Update</strong> </p>

<p>I've just updated the jsFiddle so that you can see the "pop up" happening and how it's never centered. It's always 200px from top. </p>

<p>So if the user has scrolled down a long page and clicked to make the pop up happen, the pop up is back up at the top of the page - 200px instead of centered on the visible screen.</p>

<p><a href="http://jsfiddle.net/JYgcj/40/" rel="nofollow">http://jsfiddle.net/JYgcj/40/</a></p>

<p>I'll try out the answer below and update with results of that</p>

<hr>

<p>I have a hidden div included in my layout as a partial</p>

<p>Here is the partial</p>


    

    


<p>A javascript function shows this div for showing the result of ajax requests</p>

<pre><code>function showResultPopUpDiv(divId, title) {

    var popUpId = document.getElementById(divId);
    var popUpHeader = title;
    var originalDivHTML;
    var topPos = 200;
    var popUpWidth;
    var midPos;
    var leftPos;
    var spinnerOpts;

    //Insert header text &amp; open pop up
    popUpId.style.display = "block";
    document.getElementById("ajaxResultPopUpHeaderText").innerHTML = popUpHeader;

    //Set position dimensions
    popUpWidth = popUpId.offsetWidth / 2;
    midPos = $(document).width() / 2;
    leftPos = midPos - popUpWidth;

    //Position pop up (center)
    popUpId.style.top = topPos + "px";
    popUpId.style.left = leftPos + "px";

    //Insert spinning loader code here
    ... //left out for brevity
}
</code></pre>

<p>If a view is longer than a single screen and the user has scrolled to the bottom and clicked the submit button, this div pops up but cannot be seen unless the user scrolls back to the top.</p>

<p>How do I get this to center on the window correctly wherever the page is currently scrolled to.</p>

<p><a href="http://stackoverflow.com/questions/9447180/centering-a-div-on-screen-even-when-the-page-is-scrollable">This question</a> and others that I've investigated have not solved this for me. Any ideas?</p>
