Fancybox 弹出窗口始终显示在平板电脑或移动设备的页面顶部答案

【问题标题】：Fancybox Pop Up Always Display On Top of The Page On Tablet or Mobile DeviceFancybox 弹出窗口始终显示在平板电脑或移动设备的页面顶部
【发布时间】：2015-02-05 18:33:48
【问题描述】：

Fancybox 弹出窗口在桌面上按预期工作，但在通过移动设备或平板设备访问时，弹出窗口始终显示在页面顶部。

比如说，我向下滚动页面，然后单击一个可以显示弹出窗口的链接，但弹出窗口不显示，因为它显示在顶部，所以我需要向上滚动页面。

这是我的代码

jQuery("#popup").fancybox({
    "titlePosition"     : "inside",
    "transitionIn"      : "none",
    "transitionOut"     : "none",
    "centerOnScroll"    : true
});

我们将不胜感激。

【问题讨论】：

fancybox 什么版本？

标签： jquery fancybox tablet

【解决方案1】：

为了解决这个问题，您可以使用scrollTop() 获取垂直滚动位置，然后将#popup 的上边距设置为该值。

【讨论】：

【解决方案2】：

试试这个，

jQuery('.fancy_ajax_close_btn').fancybox({
    minWidth  : '43%',
    maxWidth  : '60%',
    afterLoad : function() {

        var top = ($(window).height() / 2) - ($(".fancybox-wrap").outerHeight() / 2);
        var left = ($(window).width() / 2) - ($(".fancybox-wrap").outerWidth() / 2);
        $(".fancybox-wrap").css({ top: top, left: left});           
    }           

});

在 jquery.fancybox.css 中

.fancybox-wrap {
 left: 0;
 z-index: 8020;
 position: absolute;
 width: 200px;
 margin: 0 auto;
}

不是一个完美的解决方案，但对于 V2.0 来说它是最好的解决方案。

【讨论】：

这是我能为这个版本找到的最佳解决方案，但它仍然可以完美运行