个人中心
gpt4 book ai didi

Jquery 偏移函数使 Firefox 中的顶部样式为负数

转载 作者：行者123 更新时间：2023-11-28 18:48:22 25 4
gpt4 key购买 nike

我想创建一个固定位置的自定义警告框。它在 chrome 中运行良好，但我无法在 Firefox 中获得正确的动态位置。

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

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

然后 #alertBox div 位于 modalContainer 中并具有 position:fixed 样式。

我正在使用 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 中，top 值被设置为 100px 并显示在屏幕上。在 firefox 中，我得到一个令人讨厌的大数字作为最高值，例如 -1084px。

当我将 .offset() 值和 position() 值都输出到 console.log 时，它们在 chrome 中是相同的。但是在 firefox 中，虽然偏移值输出的正是我设置的值，但 .position() 函数输出的数字大得令人讨厌。

这是已知的浏览器不一致吗？我需要换一种方式吗？

最佳答案

尝试将您的初始位置设置为

$('#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 中的顶部样式为负数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9983370/

25 4 0
文章推荐： jquery - overflow hidden 时的可滚动区域？
文章推荐： jquery - 单击 Accordion 中的链接打开下一节
文章推荐： python - 阿拉伯语文本未正确包装在 reportlab 的段落中
文章推荐： css - LESS.js - 只能导入一个 .less 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com