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

Question

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

Answer 1

Из API page, centerOnScroll кажется, что вы хотите:

Ключ: centerOnScroll
Значение по умолчанию: ложные Описание: Когда правда, 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 для 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

Автоцентр: Если установлено значение истинно, то содержание всегда будет в центре Boolean; Значение по умолчанию: isTouch

Пример:

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