Как мне исправить положение всплывающего окна fancybox на экране при прокрутке страницы?
Есть ли какие-либо варианты в этом плагине или я должен определить его с помощью css
?
jQuery FancyBox: фиксированное положение всплывающего окна относительно окна при прокрутке
Ответы (3)
На странице API кажется, что centerOnScroll - это то, что вам нужно:
Ключ: centerOnScroll
Значение по умолчанию: false Описание: Когда истинно, FancyBox центрируется при прокрутке страницы.
Проблема с простым использованием параметра API centerOnScroll заключается в том, что пока вы прокручиваете страницу вверх и вниз, вы заметите, что ваше окно 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()
};
to:
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;
}
Надеюсь, это поможет кому-то в будущем, кто хочет, чтобы их всплывающие окна оставались идеально фиксированными на экране, желаю, чтобы у меня было это решение для меня, но мне пришлось разобраться в этом самому :)
Для fancyBox 2.0
и более поздних версий, как указано в этом документе http://fancyapps.com/fancybox/#docs
autoCenter: если установлено значение true, содержимое всегда будет центрировано Boolean; Значение по умолчанию:! IsTouch
Пример:
$('.fc-event').fancybox({
autoCenter: true,
type: 'ajax',