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

Question

我有一个模式窗口，其中显示了一些数据，其中还包含在 Blueimp 库中打开的图像。我遇到的问题是，当在 BlueImp 库中打开图像时，图像在屏幕中间没有垂直对齐。它要么到底部，要么到顶部，这取决于我在模式窗口中滚动的位置。我需要转到模态窗口的中间并打开画廊，在这种情况下，灯箱看起来居中。在没有模态的页面中直接使用 blueimp 时不会发生此问题。看起来 blueimp 画廊的灯箱以整个模态高度而不是视口高度为中心。如何仅在模态窗口内为 blueimp 覆盖它？在 boostrap modals 中使用 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 模态窗口有 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 像素。这就是为什么画廊灯箱打开到视口的顶部或底部，除非用户正好在模态窗口的中间。如果我将blueimp-gallery 直接放在没有模态窗口的正文中，我就没有这个问题。但在这个用例中，我必须将blueimp-gallery 放置在一个高度可变的模态窗口中，具体取决于其中加载的动态内容。

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

Answer 1

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

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

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

Answer 2

您应该尝试将 blueimp 放在一个带有 row 类的 div 中，然后将另一个带有 col-md-6 类的 div 放在不是 100% 肯定但它应该在中间对齐。

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

Edit 试过了，它上面必须有容器标签。

这很可能不是让它垂直居中的解决方案，但我猜这值得一试

添加

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

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