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

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

Answer 2

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

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

Answer 3

如果已经显示的模态对话框的内容高度增加（例如点击"Add Item"按钮展开模态体内的"Selected Item List"），您可以调用此函数重新计算背景：

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

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

Answer 4

根据@rhys-stephens 的回答，我创建了一个稍微好一点的解决方案。下面的代码不会在每次鼠标移动时运行，而是仅在触发 'shown'/'loaded' 事件时触发（适用于 BS3）。

此解决方案在模式为 created/shown 时有效，如果您希望它使用动态内容高度，则需要进行一些调整..

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

Answer 5

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

Answer 6

我在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
  });

希望对您有所帮助！

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

Bootstrap 3.3.1 Modal Backdrop smaller than modal content

html

css

jquery

twitter-bootstrap