jQuery的：中心的fancybox中视(jQuery: Center fancybox in v

我目前使用的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

html, body {height: 100%;}

和的fancybox将在屏幕中央，而不是页面中心位置的图像。

Answer 3:

这台left和top使用position: absolute dinamically：

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

文章来源: jQuery: Center fancybox in viewport