Construire une boîte de dialogue modale à partir de zéro avec JavaScript pour IE et Firefox

Question

J'essaye de construire une boîte de dialogue modale en JavaScript. Je l'ai travailler dans Firefox, mais pas IE avec un code comme celui-ci ...

$(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(); 

}); 

Cela fonctionne parfaitement dans FireFox, mais pas dans IE (ne pas cibler IE6)

Le problème

Le placement initial est bien dans IE, mais quand je vais redimensionner, le div ne revient pas au milieu du port de vue. J'ai vérifié que le redimensionnement et le défilement sont tous les deux déclenchés, mais le placement est désactivé dans IE.

DEMO

http://jsfiddle.net/LpuDh/

Answer 1

La question était la hauteur de la fenêtre et la largeur ... utilisé la substance jquery et il fonctionne très bien.

$(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(); 

    });