從頭開始構建模式對話框，用於IE和Firefox的JavaScript

Question

我想在JavaScript中構建模態對話框。我已經在Firefox的工作，但不能與一些像這樣的代碼，即...

$(window).bind('scroll resize', function (e) { 

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

    var d = document; 
    var rootElm = (d.documentelement && 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(); 

}); 

這工作完全在Firefox，而不是在IE（不針對IE6）

的問題

在IE中初始放置很好，但是當我去調整大小時，div不會移回到視圖端口的中間位置。我驗證了調整大小和滾動都觸發了，但放置在IE中。

DEMO

http://jsfiddle.net/LpuDh/

Answer 1

的問題是視口的高度和寬度...使用jQuery的東西，它工作正常。

$(window).bind('scroll resize', function (e) { 

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

     var d = document; 
     var rootElm = (d.documentelement && d.compatMode == 'CSS1Compat') ? d.documentelement : d.body; 
     var vpw = $(window).width(); // viewport width 
     var vph = $(window).height(); // viewport height 

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

    });