jQuery FancyBox : fixed position of popup with respect to window while scrolling

How can I fix the position of fancybox pop开发者_StackOverflow社区up window on the screen when scrolling the page?

Is there any options in this plugin or I have to define it using css?

From the API page, centerOnScroll seems to be what you want:

Key: centerOnScroll
Default Value: false Description: When true, FancyBox is centered while scrolling page

The problem with simply using the centerOnScroll API option is that while you scroll up and down the page, you will notice that your fancybox window has to "catch up" as it continuously tries to animate to get it back to the center position. This causing a "jerky" movement that doesn't look so great.

A solution you can use if you don't mind editing the Fancybox source code is to find the fancybox_get_viewport function and change it. I am using Fancybox 1.3.4. So find this:

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

and replace it with this:

        _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                
        ];
    },

This fixes the problem and now when you scroll up and down the page it will stay perfectly in the same spot in your browser. The only problem is this change causes a few animation problems where sometimes a new popup will appear to come from the bottom of the screen. To fix that requires a few more changes. Around line 378 change this:

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

to:

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

and around line 978 you will see the same thing. Replace there as well. That should fix the animation problems that come along with the fix.

Finally in your CSS for Fancybox find:

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

and replace with:

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

I hope this helps someone down the road who wants their popups to remain perfectly fixed on the screen, wish I had this solution for me, but had to figure it out myself :)

For fancyBox 2.0 and later as mentioned in this doc http://fancyapps.com/fancybox/#docs

autoCenter : If set to true, the content will always be centered Boolean; Default value: !isTouch

Example:

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