angularjs - Bootstrap Modal内部的Blueimp Gallery未正确垂直对齐

我有一个模态窗口，其中显示一些数据，这些数据也具有在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，它将把Di​​v定位到父级固定位置的中心，而不是视口的中心：

.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对齐。我希望它与视口中间对齐。例如，在我的笔记本电脑中，模态的高度为2000px，而视口的高度却不如860px。这就是为什么图库灯箱会在视口的顶部或底部打开的原因，除非用户位于模态窗口的中间。如果我将blueimp-gallery直接放置在没有模态窗口的主体中，则不会出现此问题。但是在这种使用情况下，我必须将blueimp-gallery放在具有可变高度的Modal窗口中，该窗口取决于加载在其中的动态内容。

我仍然停留在这个问题上，请问有人对这个问题有建议吗？

最佳答案

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

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

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