基本灯箱HTML

Question

我见过的一些JavaScript灯箱效果将灯箱相对于视口定位，因此当您滚动页面时，您仍会看到灯箱。

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

我不知道这第二种类型被调用了什么（或者是否存在这种行为的术语）。

我查看了FancyBox和SimpleModal，但据我所知，这些仅相对于视口定位。

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

Answer 1

这实际上取决于css。

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

<div class="lightbox_wrapper">
  <div class="lightbox">
  由ajax加载的灯箱内容   </div>
  </div>

滚动灯箱的基本CSS

div.lightbox {height：250px;宽度：250像素;保证金：汽车;位置：相对; } div.lightbox_wrapper {身高：250px;宽度：100％;顶：200像素; left：0 position：absolute; }

div.lightbox {height：250px;宽度：250像素;保证金：汽车;位置：相对; } div.lightbox_wrapper {身高：250px;宽度：100％;顶：200像素; left：0 position：fixed; }

现在我相信大多数常见的灯箱会让你包含他们的css，或者他们在加载时将它添加到DOM中。如果他们要包含一个css文件，那么只需查找声明灯箱属性的类并更改位置方法。否则你必须将值添加到你自己的css中，并将它们声明为重要的。

div.lightbox_wrapper {身高：250px;宽度：100％;顶：200像素; left：0 position：fixed ！important; }

对于另一种灯箱，我还没有看到，所以你必须在下面的评论中解释更多......

Answer 2

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

如果你查看http://fancybox.net/howto页面的底部，它有一个选项

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

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

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

Answer 3

编辑您的灯箱CSS，如下所示

#lightbox {
  position: fixed;
}

将灯箱弹出窗口置于窗口中心，编辑脚本，如下所示

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

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

Answer 4

我很欣赏这是一个老问题，但是，我已经看到了designmodo的JS大师已经很好地实现了这个版本：

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