关闭 lightbox 后不能滚动页面 (blueimp)

Question

我建立了自己的网站并希望添加不同的画廊，所以我尝试了blueimp。它完美地工作，但是当我关闭灯箱时，我不能再滚动我的页面了。有人能帮帮我吗？

这里是一小段代码片段：

<div id="artworks">
    <a href="gallery/artworks/test1.jpg" title="test1" data-gallery="#blueimp-gallery-artworks" class="btn btn-primary btn-lg" role="button">TAKE A LOOK</a>
    <a href="gallery/artworks/test2.jpg" title="test2" data-gallery="#blueimp-gallery-artworks"></a>
</div>

<!-- blueimp Gallery lightbox -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

<!-- scripts -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
<script>
document.getElementById('artworks').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

- zoesch

---

你能展示一个实际的演示（在JSFiddle或者其他地方）吗？仅凭这一点代码难以判断。可能是 overflow:hidden 这个属性没被插件移除，但仅凭代码无法确定。 - Pevara

嘿，谢谢你的回答。我试着构建一个可工作的演示，但它太复杂了。我觉得如果你访问我的网站会更容易一些;) www.zoesch.net - zoesch

Answer 1

在变量选项中，声明hidePageScrollbars: false（默认为true），这对我有用。请参见以下代码：

<script>
    document.getElementById('artworks').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
       link = target.src ? target.parentNode : target,
       options = {index: link, event: event, hidePageScrollbars: false},
       links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
    };
</script>

- rianmz

Answer 2

在我的情况下，我不小心添加了多个bluimp脚本。我删除了其他脚本，只保留了插件的一个js文件，然后问题就解决了。

- user4976254

---

谢谢，我的情况是我调用了两次jQuery-File-Upload脚本。 - Houshang.Karami