查看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行

ORIGINAL

   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

REPLACEMENT

  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的位置变化。它只影响某些浏览器。现在它具有更智能的定位，因此即使您打开从页面底部触发的模态，它也会正确定位。