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

Question

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

这就是我现在的模态：

<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>

谢谢。

Answer 1

使用纯 CSS 是不可能的，您可以根据 window 大小使用以下脚本实现模态的动态高度，并在评论中提供建议的答案 CSS；

脚本

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

CSS

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

Fiddle

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

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

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

对于远程模式

如果您想调整选择器的高度，例如 modal-body，那么对于远程模态，上述解决方案将无法使用远程模态，然后按照脚本和 CSS 可以使用 [=18 来解决这个问题=]

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

CSS

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

Bootstrap Modal events Functions

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

How make a Bootstrap modal with scrollable content and max height?

javascript

css

angularjs

bootstrap-modal

twitter-bootstrap-3