Build modal dialog from scratch with JavaScript for IE and Firefox
<p>I am trying to build a modal dialog box in JavaScript.  I have it working in Firefox but not IE with some code like this...</p>

<pre><code>$(window).bind('scroll resize', function (e) {

    var $this = $('.popup');

    var d = document;
    var rootElm = (d.documentelement &amp;&amp; d.compatMode == 'CSS1Compat') ? d.documentelement : d.body;
    var vpw = self.innerWidth ? self.innerWidth : rootElm.clientWidth; // viewport width 
    var vph = self.innerHeight ? self.innerHeight : rootElm.clientHeight; // viewport height 

    $this.css({
        position: 'fixed',
        left: ((vpw - 100) / 2) + 'px',
        top: (rootElm.scrollTop + (vph - 100) / 2) + 'px'
    }).show();

});
</code></pre>

<p>This works perfectly in FireFox, but not in IE (not targeting ie6)</p>

<p><strong>The Problem</strong></p>

<p>The initial placement is fine in IE, but when i go to resize, the div does not move back to middle of the view port.  I verified that the resize and scroll both are being triggerd, but the placement is off in IE.</p>

<p><strong>DEMO</strong></p>

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