[英]jQuery - lightbox stay and page scroll
如何创建一个始终保持文档高度和宽度不变的灯箱,当我向后滚动页面时,ligthbox不会移动并且页面正在滚动? 我有一个CSS,当我点击链接时会向我显示一个灯箱:
function resizeLightbox() {
var overlay = createOverlay(),
lightbox = createLightbox();
overlay.css({
"width": doc.width(),
"height": doc.height()
});
var width = lightbox.outerWidth(),
height = lightbox.outerHeight();
lightbox.css({
"position": "fixed",
"width": width,
"height": height,
"top": ***, // i remove that
"left": *** // and that
});
}
.lightbox__lightbox {
display: none;
background: #fff url(../gallery/ring.gif) center center no-repeat;
z-index: 10000;
// added sth like this:
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
是的,我发现了错误,问题出在顶部和左侧属性中,如何动态计算屏幕中间?
我需要编写一个函数来计数屏幕的中间位置“ ***”
只需添加位置:固定; 到灯箱的CSS
lightbox.css({
"position":'fixed',
"width": width,
"height": height,
"top": (win.height() / 2) - (height / 2) + doc.scrollTop(),
"left": (win.width() / 2) - (width / 2) + doc.scrollLeft()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.