Bootstrap Modal 中的 Blueimp Gallery 未正确垂直对齐

Question

我有一个显示一些数据的模式 window，它也有在 Blueimp 画廊中打开的图像。我遇到的问题是，当在 BlueImp 画廊中打开图像时，图像没有在屏幕中间垂直对齐。它要么到底部，要么到顶部，这取决于我在模式 window 中滚动的位置。我需要转到模态 window 的中间并打开画廊，在这种情况下灯箱看起来居中。当在没有模式的页面中直接使用 blueimp 时，不会发生此问题。看来 blueimp 画廊的灯箱以整个模式高度而不是视口高度为中心。我如何才能仅在模态 windows 内为 blueimp 覆盖它？当在 boostrap 模态中使用 blueimp 时，是否有 css 修复或 js 修复来覆盖它？

这是我的设置示例：

<div uib-modal-window="modal-window" class="modal fade" role="dialog" size="xl" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;">
   <div class="modal-dialog modal-xl">
      <div class="modal-content" uib-modal-transclude="">
        <div class="lightBoxGallery">
            <a ng-repeat="image in vm.ngModel" ng-href="{{::vm.imageurl(image.name)}}" data-gallery="">
                <img ng-src="{{::vm.getImage(image.name)}}" class="img-responsive img-thumbnail animated fadeIn">
            </a>
            <div id="blueimp-gallery" class="blueimp-gallery">
                    <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>
            </div>
    </div>
  </div>
</div>

我的设置：Angular 1.5 + Bootstrap 3 + Bootstrap UI + BlueImp Gallery

更新：

我在这里遇到的问题是，我的 Bootstrap 模态 window 有 overflow-y 可滚动并且它有一个固定的定位：

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

并且当 blueimp-gallery 打开时，作为具有固定位置的子 div，它将 Div 定位到父固定位置的中心而不是中心视口：

.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 对齐到中间，但我不希望它对齐到父（模态）div 的中间。我希望它与视口的中间对齐。例如，在我的笔记本电脑中，我的模态高度为 2000 像素，而我的视口高度则远低于 860 像素。这就是为什么画廊灯箱打开到视口的顶部或底部，除非用户正好在模态 window 的中间。如果我将 blueimp-gallery 直接放在没有模态 window 的正文中，我就不会遇到这个问题。但是在这个用例中，我必须将 blueimp-gallery 放在一个高度可变的模态 window 中，具体取决于其中加载的动态内容。

我仍然卡在这个问题上，请问有人对这个问题有什么建议吗？

Answer 1

您应该尝试将 blueimp 放入 div 和 class row，然后将另一个 div 和 class col-md-6 不是 100% 确定，但应该在中间对齐。

<div class="container">
 <div class="row">
   <div class="col-md-6">
        <div id="blueimp-gallery" class="blueimp-gallery vcenter ">
         ...
   </div>
 </div>
</div>

编辑试过它上面必须有容器标签。

很可能这不是将其垂直放置到中心的解决方案，但我想这值得一试

添加

.vcenter {
 display: inline-block;
 vertical-align: middle;
 float: none;
}

创建一个服装标签，将其添加到 css 文件中并调用它。

Answer 2

我能够解决此问题的唯一方法是将 "#blueimp-gallery" 元素从模态 Window 中拉出，然后将其作为 body 的直接子元素再次插入元素。使用 Jquery，我添加了解决问题的代码：

$(document).ready(function(){
    $("#blueimp-gallery").prependTo($("body"));
});

现在，在上面的代码之后，BlueImp Gallery 的固定位置是相对于 body 元素的，因此高度就是视口的高度。 Modal 高度不再影响 BlueImp Gallery 的高度，因为它现在作为 body 元素的直接子元素放置。

Bootstrap Modal 中的 Blueimp Gallery 未正确垂直对齐

Blueimp Gallery inside Boostrap Modal not vertical aligned properly

lightbox

twitter-bootstrap

angularjs

blueimp

angular-ui-bootstrap