Question

我想要创建一个具有固定定位的自定义警报框。它在chrome方面效果很好，但我无法在Firefox中获得动态位置。

我将模态容器设置为等于文档的大小

$('#modalContainer').height($.getDocHeight());

然后#alertBox div存在于modalContainer中并且位置为：fixed style。

我正在使用jquery偏移函数来设置#alertBox的顶部和左侧值，如下所示：

var off_top=$(window).height()/3-$('#alertBox').height()/3;
var off_top=100;
var off_left=$(window).width()/2- $('#alertBox').width()/2;
$('#alertBox').offset({top:off_top,left:off_left});

在chrome中，最高值设置为100px并显示在屏幕上。在firefox中，我得到一个令人讨厌的大数字，如-1084px。

当我将.offset（）值和position（）值输出到console.log时，它们在chrome中是相同的。但是在firefox中，虽然偏移值输出的确与我设置的完全相同，但.position（）函数输出的是一个令人讨厌的大数字。

这是一个已知的浏览器不一致吗？我需要以不同的方式解决这个问题吗？

Answer 1

尝试将初始位置设为

$('#modalContainer').height(document.documentElement.clientHeight);

那应该是height of the viewport。

每次在警报框中使用margin: auto和position: absolute时，作为计算偏移量的替代方法。你仍然可能想要设置模态容器高度，但所有警报的居中都将自动完成。

HTML

<body>
<p>Lorum ipsum ... </p>
<div id='modalContainer'>
    <div id='alertBox'>
        <h1>Beware!</h1>
    </div>
</div>
</body>

<强> CSS

#modalContainer {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
}
#alertBox {
    width: 300px; /*sample*/
    height: 200px; /*sample*/
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<强>的JavaScript

$('#modalContainer').height(document.documentElement.clientHeight);

Jquery偏移函数使得顶级样式在Firefox中成为负数

1 个答案: