随页面滚动的jQuery灯箱插件

Question

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

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

我不知道第二种类型的调用是什么(或者是否存在这种行为的术语).

我看过FancyBox和SimpleModal,但据我所知,它们只相对于视口定位.

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

Answer 1

这实际上取决于css.

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

基本灯箱HTML

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

div.lightbox {height:250px; 宽度:250像素; 保证金:汽车; 位置:相对; }
div.lightbox_wrapper {高度:250像素; 宽度:100%; 顶:200像素; 左:0 位置:绝对; }

div.lightbox {height:250px; 宽度:250像素; 保证金:汽车; 位置:相对; }
div.lightbox_wrapper {高度:250像素; 宽度:100%; 顶:200像素; 左:0 位置:固定; }

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

div.lightbox_wrapper {身高:250px; 宽度:100%; 顶:200像素; 左:0 位置:固定!重要; }

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