javascript - Bootstrap 图片库始终在页面顶部打开

Question

我正在使用Bootstrap image gallery by Blueimp 。我已将其容器放置在 Index.cshtml 页面的底部:

<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>

以下是链接到图库的 anchor 标记示例:

<a href="~/images/press/french/BABYBOOK-Couv-P-Ete-2014.png" 
  target="_blank" data-gallery="#blueimp-gallery">
  <img src="~/images/press/french/thumbs/BABYBOOK-Couv-P-Ete-2014.jpg" 
    class="img-responsive magazine" />
</a>

当您单击打开图库时，它将在页面顶部打开。我认为这些 CSS 规则控制着它的位置:

.blueimp-gallery {
  position: fixed;
  z-index: 999999;
  overflow: hidden;
  background: #000;
  background: rgba(0,0,0,.9);
  opacity: 0;
  display: none;
  direction: ltr;
  -ms-touch-action: none;
  touch-action: none;
}

.blueimp-gallery, .blueimp-gallery>.slides>.slide>.slide-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -moz-backface-visibility: hidden;
}

position:fixed 和 top:0、right:0、bottom:0、left:0 与始终在页面顶部打开的图库有关。

有没有办法让图库在用户页面上的位置打开，这样当他们关闭图库时，它就会将他们返回到原来的位置？或者有没有办法知道用户在页面上的位置，并在图库关闭后将他/她返回到该位置？

Answer 1

所有这些解决方案都像是解决方法，我对 blueimp-gallery 遇到了同样的问题，最后我意识到发生这种情况是因为该库默认隐藏页面滚动条，当您打开它时，它会直接转到顶部。

所以在选项中设置hidePageScrollbars:false

当你初始化库时:

blueimp.Gallery(links,{hidePageScrollbars:false});