On my eCommerce website, I am using Fancybox to load the shopping cart upon someone clicking the add to cart button. This works without issues. The page does not jump to the top in the background, and the modal cart window is always displayed in the center, or at the top when the page height is not enough. There is only ever a Top: 20px on this cart modal and you cannot scroll up any further.
Here is the code I'm using for the Fancybox modal shopping cart (which works perfectly):
(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
}
}
});
Now I need to use Fancybox in another way which involves loading a page template via AJAX when a button is clicked. Unlike the modal cart, this page template is long enough that it will always exceed the visible page height. The issue is that it keeps assigning Top: 632px (varies) to the Fancybox modal, whichthen leaves a large empty spot at the top. That said, it does display the Fancybox modal at the top of the screen with a 20px space at the top (like the cart), however, the user can keep scrolling up to view the additional 600+px of empty space a the top (the dark overlay is seen in this space). This problem seems to only happen on Desktop, as it behaves just fine on mobile.
Here is the code I'm using for loading the template via 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
}
}
});
}
)
})
})
It first opens the modal popup with a loading animation, and then displays the template when ready. I used the same Fancybox variables as the shopping cart, so I'm not sure what the issue is.
Worth mentioning that if I force the CSS to be Top: 20px to override the large value generated by the Fancybox modal, the modal will just pop to the very top of the page, and then you have to scroll up to see top of the modal.
Your help is most appreciated.
It would be useful to have a codepen or similar to consider, but in the absence of that, my recommendation would be to only trigger $.fancybox() open once and instead update just the content of the lightbox. You could optionally update the dimensions too.
If the initial loading spinner lightbox is positioned correctly, and all only goes wrong when the content load, this may resolve your problems.
If your loading spinner shows incorrectly, you could simplify your SO question by removing the ajax part completely and instead adding more info about css and what content is loading after lightbox display.
$(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({content:data});
// optional height resize with
// $.fancybox.update()
})
})
})
If that doesn't resolve it, try adding the following to the initial fancybox preferences:
padding: 0,
helpers: {
overlay: {
locked: false
}