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

我已成功使用此处找到的解决方案集中了一个bootstrap模式：

演示： 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

根据文档，有一个名为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

根据评论更新。

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