Question

滚动页面时，如何在屏幕上修复fancybox弹出窗口的位置？
此插件中是否有任何选项，或者我必须使用css定义它？

Answer 1

从API page开始，centerOnScroll似乎就是你想要的：

键：centerOnScroll
默认值：false 描述：当为true时，FancyBox在滚动页面时居中

Answer 2

简单地使用centerOnScroll API选项的问题是，当您向上和向下滚动页面时，您会注意到您的fancybox窗口必须“赶上”，因为它不断尝试动画以使其回到中心位置。这导致了一种看起来不那么漂亮的“生涩”运动。

如果您不介意编辑Fancybox源代码，可以使用的解决方案是找到fancybox_get_viewport函数并进行更改。我正在使用Fancybox 1.3.4。所以找到这个：

        _get_viewport = function() {
        return [
            $(window).width() - (currentOpts.margin * 2),
            $(window).height() - (currentOpts.margin * 2),
            $(document).scrollLeft() + currentOpts.margin,
            $(document).scrollTop() + currentOpts.margin
        ];
    },

并将其替换为：

        _get_viewport = function() {
        var isFixed = wrap.css('position') === 'fixed';
        return [
            $(window).width() - (currentOpts.margin * 2),
            $(window).height() - (currentOpts.margin * 2),
            (isFixed ? 0 : $(document).scrollLeft()) + currentOpts.margin,
            (isFixed ? 0 : $(document).scrollTop()) + currentOpts.margin                
        ];
    },

这解决了问题，现在当您向上和向下滚动页面时，它将完全保留在浏览器的同一位置。唯一的问题是这种变化会导致一些动画问题，有时新的弹出窗口会出现在屏幕的底部。要解决此问题，需要进行一些更改。第378行改变了这一点：

                start_pos = {
                top  : pos.top,
                left : pos.left,
                width : wrap.width(),
                height : wrap.height()
            };

为：

            final_pos = {
            top  : ((wrap.css('position') === 'fixed') ? pos.top - $(this).scrollTop() : pos.top),
            left : pos.left,
            width : wrap.width(),
            height : wrap.height()
        };

并且在第978行附近你会看到同样的事情。也替换它。这应该可以解决修复过程中出现的动画问题。

最后在你的CSS for Fancybox中找到：

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

并替换为：

#fancybox-wrap {
    position:fixed;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

我希望这可以帮助那些希望弹出窗口完全固定在屏幕上的人，希望我有这个解决方案，但我必须自己解决这个问题：）

Answer 3

对于本文档中提到的fancyBox 2.0及更高版本 http://fancyapps.com/fancybox/#docs

autoCenter ：如果设置为true，则内容将始终居中布尔;默认值：！isTouch

示例：

$('.fc-event').fancybox({
    autoCenter: true,
    type: 'ajax',

jQuery FancyBox：滚动时弹出窗口相对于窗口的固定位置

3 个答案: