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是最好的解决方案。

Fancybox Pop Up始终显示在平板电脑或移动设备上的页面顶部

2 个答案: