Question

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…

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

});

This works perfectly in FireFox, but not in IE (not targeting ie6)

The Problem

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.

DEMO

http://jsfiddle.net/LpuDh/

Answer 1

The issue was the viewport height and width… used the jquery stuff and it works fine.

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

    });