如何制作具有可滚动内容和最大高度的 Bootstrap 模式？答案

【问题标题】：How make a Bootstrap modal with scrollable content and max height?如何制作具有可滚动内容和最大高度的 Bootstrap 模式？
【发布时间】：2015-11-06 04:04:40
【问题描述】：

我有一个包含大量内容的模式。所以我希望模态框是我的窗口的最大高度，并且内容应该可以在模态框内滚动。

这就是我现在的模态：

<div class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      <h4 class="modal-title">Error Log: {{ log_name }}</h4>
    </div>
    <div class="modal-body">
      <pre>
        {{ log_content }}
      </pre>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-warning pull-left" ng-click="clear_log( )"><span class="glyphicon glyphicon-trash"></span></button>
      <button type="button" class="btn btn-default pull-left" ng-click="refresh_log( )"><span class="glyphicon glyphicon-refresh"></span></button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

谢谢。

【问题讨论】：

Twitter Bootstrap 3 Modal with Scrollable Body 的可能重复项
为max-height:10000px; 等模态div 的css 中的最大高度赋予一个非常高的值，并给出height:auto 和overflow-y:scroll
我试过了，还是一样

标签： javascript css angularjs twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

使用纯 CSS 是不可能的，您可以根据窗口大小使用以下脚本和 cmets 中的建议答案 CSS 来实现模态的动态高度；

脚本

$('#myModal').on('show.bs.modal', function () {
    $('pre').css('height',$( window ).height()*0.9);
});

CSS

.modal-body {
    overflow-y: auto;
}

Fiddle

注意：您必须调整高度，并且可能是您希望具有动态高度的目标类，例如我的目标是pre，您也可以尝试使用$('.modal-body').css('height',$( window ).height()*0.9);，它适合您的需要并根据设计.

或者您可以完全删除上面建议的 CSS 并在 JS 中设置高度，如下所示；

$('pre').css('height',$( window ).height()*0.6);

对于远程模态

如果您想调整选择器的高度，例如modal-body，那么对于远程模式，上述解决方案将无法使用远程模式，然后使用bootstrap modal loaded event 可以解决问题

$('#myModal').on('loaded.bs.modal', function () {
    $('pre').css('height',$( window ).height()*0.6); 
});

CSS

.modal-body {
    overflow-y: auto;
}

Bootstrap Modal events Functions

【讨论】：