jQuery:在视口(viewport)中居中花式框

我目前正在使用fancybox 版本2 在单击缩略图时显示我的图像，但我似乎无法让fancybox 坐在视口(viewport)的中间，垂直地说，因为水平它很好。

我已经尝试了很多东西，这是最新的:

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");
});

有没有人有任何想法？

最佳答案

$(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/

关于jQuery:在视口(viewport)中居中花式框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12075734/