查看 Reveal.js 浏览器之间的端口不一致

Question

我正在使用响应式框架构建网站 Foundation v5.5.0

我想使用他们的 Reveal Modal 弹出叠加层并显示与其所在页面相关的其他文章。

显示模块有效，但我注意到不一致。 Chrome 工作正常，但是在 IE 和 Firefox 中，模态显示从主体顶部而不是视口顶部的一定数量的像素。因此，如果用户滚动到折叠下方，您必须向上滚动才能查看模态。

我试过的
这个帖子让我走上了正确的道路

http://foundation.zurb.com/forum/posts/21450-reveal-modal-positioning-and-background-issues

所以我首先尝试编辑 Foundation.js 文件。第 3901 行

原创

   css.top = $(root_element).scrollTop() - el.data('offset') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold

替换

  css.top = $(window).scrollTop() - el.data('offset') + 'px';

这没有用。所以我尝试使用 CSS

修复它

    /*Learn More Overlay Fixes*/
.reveal-modal-bg{
    height:2000px !important;
    position:fixed;
}

.reveal-modal{position:fixed;

}

这解决了问题...在 Internet Explorer 和 Firefox 中。现在 chrome 正在像我想要的那样在屏幕中间远下方显示图像

这是 IE 中的修复

但是Chrome的结果

歌剧给了我更奇怪的结果。将模式放在浏览器视口下方很远的地方。

Answer 1

5.5 上的位置发生了变化，已在最新版本中修复。它只影响某些浏览器。现在它具有更智能的定位，因此即使您打开从页面底部触发的模式，它也会正确定位。

查看 Reveal.js 浏览器之间的端口不一致

View Port inconsistencies between browsers for Reveal.js

javascript

css

zurb-foundation