Javascript 随页面滚动的jQuery lightbox插件

我看到的一些JavaScript lightbox效果将lightbox定位在相对于视口的位置，这样当您滚动页面时，仍然可以看到lightbox

另一种是相对于页面内容定位的。如果滚动包含其中一个的页面，灯箱将随页面的其余部分一起移动

我不知道第二种类型叫什么（或者是否有一个术语来描述这种行为）

我已经看过和，但据我所知，它们仅相对于视口定位

---

什么jQuery插件允许灯箱随页面滚动？

这实际上取决于css

灯箱只是绝对定位（它们随页面移动）或固定（它们相对于浏览器窗口定位）的div

基本Lightbox HTML

由ajax加载的lightbox内容

滚动灯箱的基本CSS div.lightbox{高度：250px；宽度：250px；边距：自动；位置：相对；}
div.lightbox_包装{高度：250px；宽度：100%；顶部：200px；左侧：0位置：绝对；}

视口固定灯箱的基本CSS div.lightbox{高度：250px；宽度：250px；边距：自动；位置：相对；}
div.lightbox_包装{高度：250px；宽度：100%；顶部：200px；左侧：0位置：固定；}

现在我相信大多数常见的lightbox都会让你包含他们的css，或者他们会在加载时将其添加到DOM中。如果他们希望你包含css文件，那么只需查找声明lightbox属性的类并更改position方法。否则，你必须将这些值添加到你自己的css中，并像是

标记为重要的CSS属性 div.lightbox_包装{高度：250px；宽度：100%；顶部：200px；左侧：0位置：固定！重要；}

---

至于另一种灯箱，我还没有见过，所以你必须在下面的评论中解释更多…

罗伯特·赫斯特理论上是正确的，但如果你喜欢FancyBox，它通过配置支持两种模式

若您查看页面底部，它有一个选项

centerOnScroll如果为true，则当用户滚动页面时，内容居中

下面是一个如何调用它的示例：

jQuery(document).ready(function(){
    $('#a').fancybox({
      centerOnScroll: false
    });
});

---

编辑lightbox CSS，如下所示

#lightbox {
  position: fixed;
}

要使lightbox弹出窗口居中，请按如下所示编辑脚本

top = ($window.height()- YOUR_LIGHT_BOX_HIGHT) / 2;

---

我使用Lightbox v2.51，工作得很好。唯一的问题是，当弹出窗口固定并居中时，背景仍在滚动。

我理解这是一个老问题，但是，我看到designmodo的JS专家已经很好地实现了这个版本：

---

看看all.js文件中的showLargeImage函数。

当我说第二种类型的lightbox时，我指的是我描述的两种类型中的后一种。无论你做什么，请确保如果视口小于你为lightbox选择的大小，它仍然可以正常工作。最近我遇到了几个照片显示站点，我们e以固定的大尺寸弹出的灯箱，使得一些图像甚至灯箱的关闭按钮溢出视口（如果灯箱固定，则完全无法访问，从而有效禁用滚动条）。而且，与浏览器自己的图像用户界面不同，通常无法缩放或滚动图像，因此，对于超大图像，它们的用处不如它们所取代的图像。