На моем сайте электронной коммерции я использую Fancybox для загрузки корзины покупок, когда кто-то нажимает кнопку «Добавить в корзину». Это работает без проблем. Страница не перепрыгивает наверх в фоновом режиме, и окно модальной корзины всегда отображается в центре или вверху, когда высоты страницы недостаточно. В этой корзине есть только Top: 20px, и вы не можете прокрутить ее дальше.
Вот код, который я использую для модальной корзины Fancybox (которая отлично работает):
(function ($, F) {
// Opening animation - fly from the top
F.transitions.dropIn = function() {
var endPos = F._getPosition(true);
endPos.top = (parseInt(endPos.top, 10) - 50) + 'px';
endPos.opacity = 0;
F.wrap.css(endPos).show().animate({
top: '+=50px',
opacity: 1
}, {
duration: F.current.openSpeed,
complete: F._afterZoomIn
});
};
// Closing animation - fly to the top
F.transitions.dropOut = function() {
F.wrap.removeClass('fancybox-opened').animate({
top: '-=50px',
opacity: 0
}, {
duration: F.current.closeSpeed,
complete: F._afterZoomOut
});
};
}(jQuery, jQuery.fancybox));
$(".cart-button").fancybox({
maxWidth : 700,
maxHeight : 600,
fitToView : false,
width : '100%',
height : '70%',
autoSize : false,
autoDimensions: false,
autoCenter : true,
closeClick : false,
openMethod:'dropIn',
openSpeed:200,
closeMethod:'dropOut',
closeSpeed:200,
helpers : {
overlay : {
locked : true // try changing to true and scrolling around the page
}
}
});
Теперь мне нужно использовать Fancybox другим способом, который включает в себя загрузку шаблона страницы через AJAX при нажатии кнопки. В отличие от модальной корзины, этот шаблон страницы достаточно длинный, чтобы он всегда превышал видимую высоту страницы. Проблема в том, что он продолжает присваивать Top: 632px (меняется) модалу Fancybox, который оставляет большое пустое место наверху. Тем не менее, он отображает модальное окно Fancybox в верхней части экрана с пространством в 20 пикселей вверху (как в корзине), однако пользователь может продолжать прокручивать вверх, чтобы просмотреть дополнительные 600 + px пустого пространства вверху ( темное наложение видно в этом пространстве). Эта проблема, похоже, возникает только на рабочем столе, так как на мобильных устройствах она работает нормально.
Вот код, который я использую для загрузки шаблона через Fancybox:
$(document).ready(function() {
$(".trees-modal-button").click(function(e) {
e.preventDefault();
$.fancybox({
maxWidth : 700,
maxHeight : 600,
fitToView : false,
width : '100%',
height : '70%',
autoSize : false,
autoDimensions: false,
autoCenter : true,
closeClick : false,
openMethod:'dropIn',
openSpeed:200,
closeMethod:'dropOut',
closeSpeed:200,
helpers : {
overlay : {
locked : true // try changing to true and scrolling around the page
}
},
content: `<div class="loading-directive" style="display: block; position: relative; margin:
auto;">
<div class="loader">
<svg class="circular">
<circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
</circle>
</svg>
</div>
</div>`
});
$.get('/pages/tree-planting-temp-noindex', null, function(data) {
$.fancybox({
maxWidth : 700,
maxHeight : 600,
fitToView : false,
width : '100%',
height : '70%',
autoSize : false,
autoDimensions: false,
autoCenter : true,
closeClick : false,
openMethod:'dropIn',
openSpeed:200,
closeMethod:'dropOut',
closeSpeed:200,
content: data,
helpers : {
overlay : {
locked : true // try changing to true and scrolling around the page
}
}
});
}
)
})
})
Сначала открывается модальное всплывающее окно с анимацией загрузки, а затем отображает шаблон, когда он будет готов. Я использовал те же переменные Fancybox, что и в корзине, поэтому не уверен, в чем проблема.
Стоит отметить, что если я заставлю CSS равным Top: 20px, чтобы переопределить большое значение, сгенерированное модальным Fancybox, то модал просто выскочит в самый верх страницы, а затем вам придется прокрутите вверх, чтобы увидеть верхнюю часть моды.
Ваша помощь наиболее ценится.