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

Question

我有一个模式窗口，显示一些数据，其中还包含在 Blueimp 库中打开的图像。我遇到的问题是，当在 BlueImp 画廊中打开图像时，图像没有在屏幕中间垂直对齐。它要么到底部，要么到顶部，这取决于我在模式窗口中滚动的位置。我需要转到模式窗口的中间并打开图库，在这种情况下灯箱看起来居中。当在没有模态的页面中直接使用 blueimp 时，不会发生此问题。看起来 blueimp 画廊的灯箱以整个模态高度为中心，而不是视口(viewport)高度。如何仅在模态窗口内覆盖 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 定位到父固定位置的中心而不是视口(viewport)的中心:

.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 的中间对齐。我希望它与视口(viewport)的中间对齐。例如，在我的笔记本电脑中，我的模态框的高度为 2000 像素，而我的视口(viewport)高度远小于 860 像素。这就是为什么画廊灯箱会在视口(viewport)的顶部或底部打开，除非用户位于模式窗口的中间。如果我将 blueimp-gallery 直接放在正文中而不使用模态窗口，则不会出现此问题。但在这个用例中，我必须将 blueimp-gallery 放置在模态窗口内，该窗口的高度根据加载的动态内容而变化。

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

Answer 1

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

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

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