Question

我使用.load将带有ajax的内容加载到bootstrap模式体中。然而，模态背景的高度不是从上到下，因为我猜它是在实际图像加载到模态之前触发模态。 According to bootstrap doc我们应该使用.load而不是remote功能

CSS

.modal-backdrop {
  position: absolute; - even tried with fixed
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

jQuery我尝试在内容加载后尝试触发模态

$(this).parent().find(".modal-body").load(cont,function(data){
   thisModal.modal();
});

但是，在加载图像之前，回调仍在触发。我唯一真正的解决方案是使用css并执行：

.modal-backdrop {
    min-height: 2000px;
}

有没有更好的方法？

Answer 1

尝试这样

你可以在模型展示之前获得图像的高度和宽度，你可以将它们设置为你的CSS样式

http://jsfiddle.net/kokilajs/eWzWg/68/

    $(this).parent().find(".modal-body").load(cont,function(data){

    $("#im").one('load',function(){ //add img id "im"
    orgWidth = this.width;
    orgHeight = this.height;
    alert(orgHeight);
  $('.modal-backdrop').css('min-height', orgHeight);  
  });
     thisModal.modal();
    });

使用.load时Bootstrap模态背景高度？

1 个答案: