javascript - 使用适用于 IE 和 Firefox 的 JavaScript 从头开始​​构建模式对话框

Question

我正在尝试用 JavaScript 构建一个模式对话框。我可以在 Firefox 中使用它，但不能在 IE 中使用这样的代码...

$(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 不会移回到视口(viewport)的中间。我验证了调整大小和滚动都被触发，但在 IE 中放置已关闭。

演示

http://jsfiddle.net/LpuDh/

Answer 1

问题是视口(viewport)的高度和宽度...使用了 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();

    });