Javascript IE7模态对话框-定位错误？

更新
我找到了真正的问题。
在我的代码中，我引用了覆盖层的高度， 在除IE7之外的所有浏览器中，这与窗口大小相同，但在IE7中，这是文档大小

因此，我将其更改为引用窗口大小，它可以工作：）

所以我现在的问题是，为什么IE7会这样做，我假设IE7是这里的界外球，对吗

---

原创
我正在创建一个模式对话框脚本（供我自己使用）

该代码在中完全工作

谷歌浏览器， 火狐， IE8+

然而，在IE7中，定位是完全错误的。

这些是我在IE9和IE7中得到的定位值（请记住，这些值比正常窗口小，因为我打开了开发工具。）

IE7
左：367px
顶部：1409px

IE9 左：369.5px
顶部：122.5px

我需要做什么来解决这个问题

CSS
请注意，此css有一些奇怪的规则，例如仅用于测试目的的body标记。
请注意，我知道rgba、box shadow等在css3不支持的浏览器中不起作用，
当对话框正常工作时，我将修复此问题

Javascript文件

(function($) {

    $.widget("hailwood.modal", {

        options: {
            width: null,
            height: null,
            title: '',
            closeOnEscape: true,
            modal: true
        },

        self: {},

        _create: function() {

            //setup our elements
            var self = this;

            this.body = $('body');
            this.content = self.element;
            this.place = $('<div id="modal-place" style="display:none;"></div>');
            this.dialog = $('<div id="modal-dialog"><div id="modal-element"></div></div>');
            this.stuff = $('#modal-element', this.dialog);
            this.overlay = $('<div id="modal-overlay"></div>');
            this.title = $('<div id="modal-title">' + this.options.title + '</div>');
            this.closeButton = $('<div id="modal-close"></div>');


            //shove the placeholder element in
            this.content.after(this.place);

            //capture width and height
            this.orig_width = (this.options.width === null ? this.content.outerWidth(true) : this.options.width);
            this.orig_height = (this.options.height === null ? this.content.outerHeight(true) : this.options.height);

            //insert elements into the dom
            this.body.prepend(
                    this.overlay.prepend(
                            this.dialog.prepend(
                                    this.stuff.prepend(this.content)
                                    )
                                    .prepend(this.closeButton)
                                    .prepend(this.title)));

            //make the content visible
            this.content.show();

            this.refresh(this);

            //show the overlay and dialog
            this.overlay.fadeIn('medium', function(){
                self.dialog.show('slide', {direction: 'down'}, 'medium');
            });

            //setup the resize handler
            $(window).resize(function() {
                self.refresh();
            });

            this.closeButton.click(function() {
                self.close();
            });

            if (this.options.closeOnEscape)
                $(document).bind('keyup.hailwood.modal', function(e){
                    if (e.keyCode == 27)
                        self.close();
                });

            //setup close handler
            this.self = this;

        },

        close: function() {
            this.destroy();
        },

        refresh: function() {
            var self = this;
            if (self.overlay.length == 0 || self.dialog.length == 0)
                return false;

            self.height = self.orig_height;
            self.width = self.orig_width;

            //make an adjustment to the height if it is bigger than the overlay
            var s1 = self.height;
            self.height = (self.height > self.overlay.height() ? self.overlay.height() - 20 : self.height);

            var diff = (s1 === self.height ? 0 : 16);

            //set the dialog height and width
            self.dialog.height(self.height);
            self.dialog.width(self.width);
            self.stuff.height(self.height -diff);
            self.stuff.width(self.width);

            //position the dialog
            self.left = (self.overlay.width() / 2) - (self.dialog.outerWidth() / 2);
            self.top = (self.overlay.height() / 2) - (self.dialog.outerHeight() / 2);

            self.dialog.css({left : self.left, top  : self.top});

        },


        destroy: function() {
            var self = this;
            self.dialog.hide('slide', {direction: 'down'} ,'medium', function() {
                self.place.after(self.content.hide());
                self.place.remove();
                self.dialog.remove();
                $(window).unbind('.hailwood.modal');
                $(document).unbind('hailwood.modal');
                self.overlay.fadeOut('medium', function() {
                    self.overlay.remove();
                });
            });
            $.Widget.prototype.destroy.call(this);

        }
    });
    /*
     * Remember what I said in the first comment?
     * we pass in jQuery here so it gets aliased as $
     */
})(jQuery);

（函数（$）{
$.widget（“hailwood.modal”{
选项：{
宽度：空，
高度：空，
标题：“”，
closeOnEscape：没错，
莫代尔：对
},
self:{}，
_创建：函数（）{
//设置我们的元素
var self=这个；
this.body=$（'body'）；
this.content=self.element；
this.place=$（''）；
this.dialog=$（''）；
this.stuff=$（“#模态元素”，this.dialog）；
this.overlay=$（''）；
this.title=$（“”+this.options.title+“”）；
this.closeButton=$（''）；
//将占位符元素推入
本.内容.后（本.处）；
//捕获宽度和高度
this.orig_width=（this.options.width==null？this.content.outerWidth（true）：this.options.width）；
this.orig_height=（this.options.height==null？this.content.outerHeight（true）：this.options.height）；
//在dom中插入元素
这是我的身体(
这个。覆盖。前置(
this.dialog.prepend(
this.stuff.prepend（this.content）
)
.prepend（此.Close按钮）
.prepend（此标题））；
//使内容可见
this.content.show（）；
这个,刷新(这个),；
//显示覆盖图和对话框
this.overlay.fadeIn（'medium'，function（））{
self.dialog.show（'slide'，{direction:'down'}，'medium'）；
});
//设置调整大小处理程序
$（窗口）。调整大小（函数（）{
self.refresh（）；
});
单击此.closeButton.click（函数（）{
self.close（）；
});
if（this.options.closeOnEscape）
$（document.bind（'keyup.hailwood.modal'，函数（e）{
如果（e.keyCode==27）
self.close（）；
});
//设置关闭处理程序
this.self=这个；
},
关闭：函数（）{
这个。销毁（）；
},
刷新：函数（）{
var self=这个；
if（self.overlay.length==0 | | self.dialog.length==0）
返回false；
self.height=self.orig_高度；
self.width=self.orig_width；
//如果高度大于覆盖层，则对其进行调整
var s1=自身高度；
self.height=（self.height>self.overlay.height（）？self.overlay.height（）-20:self.height）；
var diff=（s1==自身高度？0:16）；
//设置对话框的高度和宽度
self.dialog.height（self.height）；
self.dialog.width（self.width）；
self.stuff.height（self.height-diff）；
self.stuff.width（self.width）；
//定位对话框
self.left=（self.overlay.width（）/2）-（self.dialog.outerWidth（）/2）；
self.top=（self.overlay.height（）/2）-（self.dialog.outerHeight（）/2）；
css（{left:self.left，top:self.top}）；
},
销毁：函数（）{
var self=这个；
self.dialog.hide（'slide'，{direction:'down'}，'medium'，function（）{
self.place.after（self.content.hide（））；
self.place.remove（）；
self.dialog.remove（）；
$（窗口）。解除绑定（'.hailwood.modal'）；
$（document.unbind（'hailwood.modal'）；
self.overlay.fadeOut（'medium'，function（）{
self.overlay.remove（）；
});
});
$.Widget.prototype.destroy.call（this）；
}
});
/*
*还记得我在第一条评论中说的吗？
*我们在这里传入jQuery，因此它的别名为$
*/
})（jQuery）；

尝试删除此行：

   body {
        height: 3000px;
    }

在我测试时没有影响FF，而且我真的看不出它有什么用处

---

当你试图让CSS工作时，最好删除不必要的代码，这样你就可以确定问题的根源，除非你认为框阴影可能与你的定位问题有关。

这一行是为了模拟一个包含大量内容的页面，因此，滚动条，我发现了实际问题。在我的代码中，我引用了覆盖的高度，在除IE7之外的所有浏览器中，这与窗口大小相同，但在IE7中，这是文档大小。因此，我将其更改为参考窗口大小，它可以工作：）

   body {
        height: 3000px;
    }