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

【问题标题】：Bootstrap 3.3.1 Modal Backdrop smaller than modal contentBootstrap 3.3.1 模态背景小于模态内容
【发布时间】：2015-01-09 00:41:56
【问题描述】：

我刚刚从 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>

如果我将模态框放在小部件主体 div 之外，也会发生同样的事情。

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

如果已经显示的模态对话框的内容高度增加了（例如，单击“添加项目”按钮以展开模态体中的“选定项目列表”），您可以调用此函数来重新计算背景：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

你能告诉mw，在上述链接中，我会在哪里找到解决方案..因为我以前从未使用过github。
您只需要将 Bootstrap 升级到 3.3.4 或更高版本。从这里下载：getbootstrap.com。别忘了给这个答案投票

【解决方案3】：

我在 bootstrap 3.3.2 中也遇到了这个问题。当模态内容动态变化时，Backdrop 不会调整其背景大小。这个问题也出现在 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
  });

希望这能有所帮助！

【讨论】：

【解决方案4】：

您很可能会遇到已知且尚未修复的错误https://github.com/twbs/bootstrap/issues/15418 和/或https://github.com/twbs/bootstrap/issues/15136

【讨论】：

【解决方案5】：

我使用这个 jQuery hack 来让它工作：

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

【讨论】：

【解决方案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
});});

【讨论】：