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

Question

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

这就是我现在的模态:

<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 是不可能的，您可以根据窗口大小实现模态的动态高度，使用以下脚本，在评论中提供建议的答案 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 然后下面的脚本和 CSS 可以用 bootstrap模态加载事件

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

CSS

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

Bootstrap Modal events Functions