jQuery：在视口中居中花式框答案

【问题标题】：jQuery: Center fancybox in viewportjQuery：在视口中居中花式框
【发布时间】：2012-08-22 14:46:57
【问题描述】：

我目前正在使用 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");
});

有人有什么想法吗？

【问题讨论】：

您使用的是 Fancybox V2 吗？这里的演示页面（fancyapps.com/fancybox）似乎在两个轴上都可以正常工作。能给个链接吗？
嗨@BillyMoat，我愿意，但它在开发服务器上并且IP受限：/另外，我认为花式框可以根据页面尺寸很好地居中，但我需要根据实际视口居中我在 facebook 画布应用程序页面中使用的浏览器，该页面非常高，根据当前滚动位置，您需要向上/向下滚动以适应视口中的图像

标签： jquery css fancybox-2

【解决方案1】：

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

html, body {height: 100%;}

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

嗨@Vitor Ussui，感谢您的回答，我认为您的回答工作正常，但看起来fancybox 是基于总页面高度居中而不是运行视口高度？
那么您只需将$(window) 更改为$(document)。问题是如果您不在页面中间（假设它高于视口），您将看不到它。在这种情况下，试试这个http://jsfiddle.net/aGhxK/5/，这样即使您向下滚动，框也将始终居中。
最新的小提琴是完美的，但由于某种原因，我的灯箱仍在页面中间，但是当我向上或向下滚动时，它不会留在视口中，不知道为什么.. ..
你检查过你的灯箱元素，看看它是静态的还是绝对的？另外，请确保在 jQuery 中使用 $(window)。
我认为这可能与 Billy Moat 指出的 facebook 应用程序画布页面有关，在 fancybox 2 演示页面上，fancyboxes 实际上正好出现在视口的中心，但它没有发生出于某种原因对我来说。