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的方法，当模态使用远程选项加载内容时会触发事件＆＃39; <＃39;

所以使用你的代码就是这样的：

$('#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

根据评论进行更新。

它在计算宽度和宽度之前显示模态。高度，然后一旦它得到它们就会居中。您无法从隐藏的对象中获取维度，因为他们没有任何维度，直到他们显示为止。您必须在模式标记中添加一个类，以便设置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');
});

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

1 个答案: