javascript-随页面滚动的jQuery灯箱插件

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

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

我不知道第二种类型叫什么(或者甚至没有关于这种行为的术语).

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

哪些jQuery插件允许灯箱随页面滚动？

解决方法:

这实际上取决于CSS.

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

基本灯箱HTML

<div class="lightbox_wrapper">
     <div class="lightbox">
         the lightbox content loaded by ajax
    </div>
</div>

滚动灯箱的基本CSS

div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:absolute; }

视口固定灯箱的基本CSS

div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed; }

现在,我相信大多数常见的灯箱会让您包括它们的CSS,或者它们在加载时将其添加到DOM中.如果您希望它们包含一个CSS文件,则只需查找声明灯箱属性的类并更改position方法即可.否则,您将不得不将这些值添加到您自己的CSS中,并像这样声明它们的重要性.

CSS属性标记为重要

div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed !important; }

至于另一种灯箱,我还没有看到,所以您必须在下面的评论中进行解释…

标签：lightbox,jquery-plugins,javascript,jquery
来源： https://codeday.me/bug/20191024/1919173.html