Bootstrap 3.3.1模态背景小于模态内容

Question

我刚从3.2升级到Bootstrap 3.3.1，因为它依赖于我使用的Smart Admin主题。我正在使用一个模式对话框，其中包含很长的远程内容。在之前的版本中，模态背景正常工作：它很暗并且允许模态内容滚动到比屏幕更长的同时保持整个屏幕尺寸的暗。例如

现在，对于版本3.3.1，模态背景的大小小于模态内容的大小。

如何让它正常工作？

这是我的代码：

    <div class="pull-right">
        <a class="btn btn-primary" href="@Url.Action("Viewprint", new { qGroupId = Model.QuestionGroupId })" data-target="#myModal" data-toggle="modal" data-keyboard="false"><i class="fa fa-fw fa-lg fa-print"></i>Print Report</a>
    </div>
    <div class="clearfix"></div>
    <div class="widget-body">            
        <div class="modal fade" id="myModal">
            <div id="modalContainer" class="modal-dialog modal-lg">
                <div class="modal-content">
                </div>
            </div>
        </div>
    </div>

如果我将模态置于widget-body div之外，则会发生同样的事情。

Answer 1

此问题现已在Bootstrap 3.3.4版本中得到解决，因此不需要黑客代码。 https://github.com/twbs/bootstrap/pull/15881

Answer 2

我在bootstrap 3.3.2中也遇到了这个问题。当模态内容动态变化时，背景不会调整其背景的大小。此问题也出现在bootstrap 3.3.0 +

中

我用它修理了它：

 $('.modal').on('shown.bs.modal', function(e){
      $(this).modal('handleUpdate'); //Update backdrop on modal show
      $(this).scrollTop(0); //reset modal to top position
  });

希望这有帮助！

Answer 3

如果已经显示的模式对话框的内容高度增加（例如，单击＆＃34;添加项目＆＃34;按钮以展开＆＃34;选择项目列表＆＃34;在模态体内），您可以调用此函数重新计算背景：

$("#YOUR_MODAL_ID").data("bs.modal").handleUpdate();

它对我有用，希望这对你也有帮助！

Answer 4

你最有可能遇到已知的＆amp;尚未修复的错误https://github.com/twbs/bootstrap/issues/15418和/或https://github.com/twbs/bootstrap/issues/15136

Answer 5

我使用这个jQuery hack来实现它：

$( window ).on( 'mousemove mouseup', function() {
      $backdrop  = $('.modal-backdrop');
      el_height  = $modal.innerHeight();
    $backdrop.css({
        height: el_height + 20,
    });
});

Answer 6

根据@ rhys-stephens的回答，我创建了一个稍好的解决方案。 下面的代码不会在每个mousemove上运行，而是仅在触发'shown'/'loaded'事件时触发它（在BS3上工作）。

此解决方案在创建/显示模态时有效，如果您希望它与动态内容高度一起使用，则需要进行一些调整。

$("#modal, #modal-lg").on('shown.bs.modal, loaded.bs.modal', function () {
  var $modal        = $(this),
      $backdrop     = $('.modal-backdrop'),
      $modalContent = $modal.find('.modal-dialog'),
      $modalHeight  = function() {
        return ($modalContent.height() > $(window).height()) ? $modalContent.height() : $(window).height();
      };

$backdrop.css({
  height: $modalHeight * 1.1
});});