Fancybox 2.1 loading AJAX template 顶部留有较大空隙,但我用其他方式使用Fancybox时不会出现这个问题
Fancybox 2.1 loading AJAX template leaving large gap at the top, but this problem does not occur when I use Fancybox in other ways
在我的电子商务网站上,我使用 Fancybox 在有人点击添加到购物车按钮时加载购物车。这没有问题。后台页面不跳到顶部,模态购物车window一直显示在中间,或者页面高度不够时在顶部。此购物车模式中只有 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 模态,顶部有 20px space(如购物车),但是,用户可以继续向上滚动以查看额外的 600+px 空 space a 顶部(在此 space 中可以看到深色覆盖层)。这个问题似乎只发生在桌面上,因为它在移动设备上表现得很好。
这是我用于通过 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 模式生成的大值,模式将弹出到页面的最顶部,然后您必须向上滚动才能看到模态框的顶部。
非常感谢您的帮助。
考虑使用 codepen 或类似工具会很有用,但如果没有,我的建议是只触发 $.fancybox()
打开一次,而不是只更新灯箱的内容。您也可以选择更新尺寸。
如果初始加载微调灯箱的位置正确,并且仅在内容加载时出错,这可能会解决您的问题。
如果您的加载微调器显示不正确,您可以通过完全删除 ajax 部分并添加更多关于 css 的信息以及灯箱显示后加载的内容来简化您的 SO 问题。
$(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()
})
})
})
如果这不能解决问题,请尝试将以下内容添加到初始的 fancybox 首选项中:
padding: 0,
helpers: {
overlay: {
locked: false
}
在我的电子商务网站上,我使用 Fancybox 在有人点击添加到购物车按钮时加载购物车。这没有问题。后台页面不跳到顶部,模态购物车window一直显示在中间,或者页面高度不够时在顶部。此购物车模式中只有 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 模态,顶部有 20px space(如购物车),但是,用户可以继续向上滚动以查看额外的 600+px 空 space a 顶部(在此 space 中可以看到深色覆盖层)。这个问题似乎只发生在桌面上,因为它在移动设备上表现得很好。
这是我用于通过 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 模式生成的大值,模式将弹出到页面的最顶部,然后您必须向上滚动才能看到模态框的顶部。
非常感谢您的帮助。
考虑使用 codepen 或类似工具会很有用,但如果没有,我的建议是只触发 $.fancybox()
打开一次,而不是只更新灯箱的内容。您也可以选择更新尺寸。
如果初始加载微调灯箱的位置正确,并且仅在内容加载时出错,这可能会解决您的问题。
如果您的加载微调器显示不正确,您可以通过完全删除 ajax 部分并添加更多关于 css 的信息以及灯箱显示后加载的内容来简化您的 SO 问题。
$(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()
})
})
})
如果这不能解决问题,请尝试将以下内容添加到初始的 fancybox 首选项中:
padding: 0,
helpers: {
overlay: {
locked: false
}