内容加载后垂直重新引导模态 [英] Re-center bootstrap modal vertically after content has loaded

问题描述

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

演示: 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;

但是，它不适用于远程加载的内容.它是在加载内容之前计算高度.然后，在加载内容之后，位置就变了.

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

似乎最好的解决方案是在加载内容后重新计算高度.这样，较小的模态(不包含内容)将在中心加载，然后在加载内容后将重新居中.

有什么好方法吗?

解决方案

根据文档是一种名为loaded.bs.modal的方法，其中，事件'...在模式已使用remote选项加载了内容时触发....

因此，使用您的代码将是这样:

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

I have successfully centered a bootstrap modal using the solution found here:

Demo: http://codepen.io/dimbslmh/full/mKfCc Code: 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;

However, it doesn't work well with remotely loaded content. It's calculating the heights before the content is loaded. Then, after the content is loaded, the position is way off.

I've tried various methods to delay the calculations by a set time, but these methods have resulted in the modal loading at the top of the page, and then jumping down to the center.

It seems like the nicest solution would be to have it RE-CALCULATE the heights after the content is loaded. That way, the smaller modal (without the content) will load in the center, and then it will re-center once the content is loaded.

Is there a good way to do this?

解决方案

According to the docs there is a method called loaded.bs.modal where the event '...is fired when the modal has loaded content using the remote option.'

So with your code it would be something like this:

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

Here's a fork of that PEN that should work (haven't tested with remote source) http://codepen.io/craigmdennis/pen/fChIm

Update based on comments.

Its showing the modal before it calculates the width & height, then centers it once it's got them. You can't get dimensions from a hidden object as they don't have any until they're displayed. You'll have to add a class to the modal markup so you can set visibility: hidden; and z-index: -99; (so it's invisible and behind any content so not clickable) then remove the class when the loaded.bs.modal event is fired.

In the CSS:

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

Then in the 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');
});

这篇关于内容加载后垂直重新引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！