Question

我有一个模态窗口，显示一些数据，这些数据也包含在Blueimp图库中打开的图像。我遇到的问题是，当在BlueImp图库中打开图像时，图像不会在屏幕中间垂直对齐。它位于底部或顶部，它取决于我在模态窗口中滚动的位置。我需要转到模态窗口的中间并打开图库，在这种情况下，灯箱看起来居中。当blueimp直接在没有模态的页面中使用时，不会发生此问题。似乎blueimp画廊的灯箱以整个模态高度为中心而不是视口高度。我怎样才能覆盖模态窗口内的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 Modal窗口有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置于一个Modal窗口中，该窗口具有可变高度，具体取决于其中加载的动态内容。

我仍然坚持这个，有人对这个问题有什么建议吗？

Answer 1

你应该尝试将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>

编辑尝试了它必须在其上方有容器标记。

很可能这不是垂直到达中心的解决方案，但这值得一试我猜

ADDITION

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

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

Answer 2

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

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

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

Boostrap Modal内的Blueimp Gallery未垂直对齐

2 个答案: