如何使用可滚动内容和最大高度制作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 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

Answer 2

如果长时间内容像Ajax一样动态滚动不起作用，那么需要添加以下样式。

/* Modal scroll */
.modal-dialog {
    overflow-y: initial !important
}

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