制作可滚动的灯箱

Question

对于一个新项目，我需要制作一个可扫描的灯箱，就像点击pinterest上的任何图像后打开一样。要求是：

1. 灯箱必须支持HTML内容。
2. 内容可能更多是监视器屏幕（固定宽度但没有高度限制）。
3. 灯箱不应该有独立的滚动条，但必须使用浏览器的滚动条，如pinterest。
4. 当灯箱打开时，滚动事件应仅滚动灯箱而不滚动背景。
5. 只接受纯Javascript和/或JQuery和/或HTML5 / CSS3解决方案。

我经历了不少灯箱JS甚至JQuery插件。它似乎最支持单屏灯箱。

是否有人知道任何可用的JS / JQuery插件来实现上述要求。如果没有，是否有任何教程可以帮助制作自定义插件以达到上述要求。

提前致谢，

卡皮尔西。

Answer 1

您正在寻找的只能通过HTML / CSS。只需使用任何Javascript库即可轻松实现，JS / JS Lib取决于个人品味。

就主要逻辑而言，在pintrest中，滚动功能是通过CSS属性'overflow-y：scroll'实现的。对于叠加（灯箱背景），没有定义宽度/高度，但CSS属性（顶部：0;底部：0;左：0;右：0;）将完成魔术。

使用上面的CSS属性（显然很少有其他设计），将出现灯箱的滚动功能。但是你会注意到两个垂直滚动条;一个用于身体，另一个用于灯箱。这里的诀窍是让身体滚动条消失。这可以通过在灯箱打开时将CSS属性（'overflow：hidden'）提供给body来完成，并在关闭时将其删除，这可以通过JS / JS-lib轻松完成。因此，我们将有两个滚动条，但一次只显示一个滚动条，可以获得所需的效果。

希望这有帮助。

Answer 2

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

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

如果你有一个链接指向这样的html内容：

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

它会打开带有#inline内容的fancybox，例如：

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

它使用标准滚动条，如果你足够大，则无法滚动其他内容。