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

Question

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

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

这是我的代码

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

任何帮助都会被感谢。

Answer 1

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

Answer 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来说，它是最好的。