jQuery FancyBox: исправлено положение всплывающего окна относительно окна при прокрутке

Question

Как я могу исправить положение всплывающего окна fancybox на экране при прокрутке страницы?
Есть ли какие-либо параметры в этом плагине, или я должен определить его, используя css?

Answer 1

Проблема простого использования опции 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 для 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 2

На странице API centerOnScroll выглядит так, как вам нужно:

Ключ: centerOnScroll
Значение по умолчанию: false Описание: Когда true, FancyBox центрируется, когдастраница прокрутки

Answer 3

Для fancyBox 2.0 и позже, как указано в этом документе http://fancyapps.com/fancybox/#docs

autoCenter : если установлено значение true, содержимое всегда будет центрировано Boolean; Значение по умолчанию:! IsTouch

Пример:

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