隨頁面滾動的jQuery燈箱插件

Question

我見過的一些JavaScript燈箱效果將燈箱相對於視口定位，因此當您滾動頁面時，您仍會看到燈箱。

另一種是相對於頁面內容定位的那些。 如果您滾動包含其中一個的頁面，燈箱將與頁面的其余部分一起移動。

我不知道第二種類型的調用是什么（或者是否存在這種行為的術語）。

我看過FancyBox和SimpleModal ，但據我所知，它們只相對於視口定位。

什么jQuery插件允許與頁面滾動的燈箱？

Answer 1

這實際上取決於css。

燈箱只是絕對定位的div（它們隨頁面移動）或固定（它們相對於瀏覽器窗口定位）。

基本燈箱HTML

<div class="lightbox_wrapper">
<div class="lightbox">
由ajax加載的燈箱內容
</div>
</div>

滾動燈箱的基本CSS

div.lightbox {height：250px; 寬度：250像素; 保證金：汽車; 位置：相對; }
div.lightbox_wrapper {身高：250px; 寬度：100％; 頂：200像素; 左：0 位置：絕對; }

視口固定燈箱的基本CSS

div.lightbox {height：250px; 寬度：250像素; 保證金：汽車; 位置：相對; }
div.lightbox_wrapper {身高：250px; 寬度：100％; 頂：200像素; 左：0 位置：固定; }

現在我相信大多數常見的燈箱會讓你包含他們的css，或者他們在加載時將它添加到DOM中。 如果他們要包含一個css文件，那么只需查找聲明燈箱屬性的類並更改位置方法。 否則你必須將值添加到你自己的CSS中，並將它們聲明為這樣重要。

CSS屬性標記為重要

div.lightbox_wrapper {身高：250px; 寬度：100％; 頂：200像素; 左：0 位置：固定 }

至於另一種燈箱，我還沒見過，所以你必須在下面的評論中解釋更多...

Answer 2

編輯你的燈箱CSS如下

#lightbox {
  position: fixed;
}

將燈箱彈出窗口置於窗口中心編輯腳本，如下所示

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

我使用Lightbox v2.51並且效果很好。 唯一的問題是，當彈出窗口固定並居中時，背景是滾動的。

Answer 3

羅伯特赫斯特在理論上是正確的，但如果你喜歡FancyBox，它通過配置支持這兩種模式

如果你查看http://fancybox.net/howto頁面的底部，它有一個選項

centerOnScroll如果為true，則當用戶滾動頁面時，內容將居中

這是一個如何調用它的示例：

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

Answer 4

我很欣賞這是一個老問題，但是，我已經看到了designmodo的JS大師們已經很好地實現了這個版本：

http://designmodo.com/startup/#component-grid

看一下all.js文件中的showLargeImage函數。