加载内容后垂直重新居中引导模式

Question

我已使用此处找到的解决方案成功地使引导模式居中：

演示：http://codepen.io/dimbslmh/full/mKfCc 代码：http://codepen.io/dimbslmh/pen/mKfCc

var contentHeight = $(window).height() - 60;
var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

但是，它不适用于远程加载的内容。它在加载内容之前计算高度。那么，加载完内容后，位置就偏了。

我尝试了各种方法将计算延迟设定的时间，但这些方法导致模态加载在页面顶部，然后跳到中心。

似乎最好的解决方案是在加载内容后让它重新计算高度。这样，较小的模态（没有内容）将在中心加载，然后在加载内容后重新居中。

有什么好办法吗？

Answer 1

根据the docs，有一个名为loaded.bs.modal 的方法，其中事件'...在模态使用远程选项加载内容时触发。'

所以你的代码应该是这样的：

$('#myModal').on('loaded.bs.modal', function () {
  var contentHeight = $(window).height() - 60;
  var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
  var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;
});

这是应该可以工作的 PEN 的一个分支（尚未使用远程源进行测试）http://codepen.io/craigmdennis/pen/fChIm

基于 cmets 更新。

它在计算宽度和高度之前显示模态，然后在得到它们后将其居中。您无法从隐藏对象中获取尺寸，因为它们在显示之前没有任何尺寸。您必须向模态标记添加一个类，以便您可以设置 visibility: hidden; 和 z-index: -99;（因此它是不可见的，并且位于任何内容后面，因此不可点击）然后在触发 loaded.bs.modal 事件时删除该类。

在 CSS 中：

.invisible {
  visibility: hidden;
  position: absolute; /* It will already have a position declaration */
  z-index: -99;
}

然后在 JavaScript 中：

$('#myModal').on('loaded.bs.modal', function () {
  var contentHeight = $(window).height() - 60;
  var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
  var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

  $(this).removeClass('invisible');
});