製作可滾動的燈箱

對於一個新項目，我需要製作一個可愛的燈箱，就像點擊pinterest上的任何圖像後打開的一樣。要求是：製作可滾動的燈箱

燈箱必須支持HTML內容。
內容可能多於監視器屏幕（固定寬度但不限高度）。
燈箱不應該有其獨立的滾動條，但必須使用瀏覽器的滾動條，如pinterest。
當燈箱打開時，滾動事件只能滾動燈箱而不滾動背景。
只有純Javascript和/或JQuery和/或HTML5/CSS3解決方案是可以接受的。

我經歷了不少燈箱的JS甚至JQuery插件。它似乎最支持單屏幕燈箱。

是否有人知道任何可用的JS/JQuery插件來實現上述要求。如果沒有，是否有任何教程可以幫助製作自定義插件來達到上述要求。

在此先感謝，

Kapil。

來源

2012-08-07 Kapil Sharma

您只有通過HTML/CSS才能找到您正在尋找的內容。只需要使用任何Javascript庫即可輕鬆實現，JS/JS Lib取決於個人喜好。

就主要邏輯而言，在pintrest中，滾動功能是通過CSS屬性'overflow-y：scroll'實現的。對於疊加（燈箱背景），沒有定義寬度/高度，但CSS屬性（頂部：0;底部：0;左側：0;右側：0;）將會發揮魔力。

有了上面的CSS屬性（顯然很少有其他設計），將出現燈箱的滾動功能。但是，您會注意到兩個垂直滾動條;一個爲身體和其他燈箱。這裏的訣竅是使滾動條消失。這可以通過在Lightbox打開時向body添加CSS屬性（'overflow：hidden'）來完成，並在關閉時將其刪除，這可以通過JS/JS-lib輕鬆完成。因此，我們將有兩個滾動條，但每次只顯示一個滾動條會獲得所需的效果。

希望這會有所幫助。

來源

2012-08-09 03:40:46

使用的fancybox（使用jQuery一起）： http://www.fancyapps.com/fancybox/

var options = {/* options*/}; 
$(".links").fancybox(options);

如果你有一個鏈接指向到HTML這樣的內容：

<a href='#inline' class='links'>Open fancybox</a>

它會打開的fancybox與內容#inline，如：

<div id='inlines' style='display: none'> 
My brilliant fancybox content. 
</div>

它使用standa RD滾動條，如果你足夠大，其他內容不能滾動。

來源

2012-08-07 13:19:38 DerWaldschrat

製作可滾動的燈箱

回答

相關問題