Question

我目前正在使用fancybox版本2来显示我的图像，当点击缩略图但我似乎无法让fancybox坐在视口的中间，从垂直方向来说，因为横向它很好。

我尝试过很多东西，这是最新的：

CSS

.fancybox-wrap { 
    position: fixed !important;
    top: 50px !important;
}

的jQuery

jQuery(document).ready(function() {
    $(".fancybox-wrap").css("position", "absolute");

    // fancybox initialisation etc

});


$(window).scroll(function() {
    $('.fancybox-wrap').css('top', $(this).scrollTop() + "50px");
});

有没有人有任何想法？

Answer 1

$(window).bind('resize', function() {
    var top = ($(window).height() / 2) - ($(".fancybox-wrap").outerHeight() / 2);
    var left = ($(window).width() / 2) - ($(".fancybox-wrap").outerWidth() / 2);
    $(".fancybox-wrap").css({ top: top, left: left});
}).trigger('resize');

http://jsfiddle.net/aGhxK/23/

Answer 2

您唯一需要做的就是添加到网站css

if (notification happens)

fancybox会将图像定位在屏幕中心而不是页面中心。

Answer 3

这会动态地使用left设置top和position: absolute：

http://jsfiddle.net/aGhxK/1/

jQuery：视口中的中心fancybox

3 个答案: