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

如何使用可滚动内容和最大高度制作Bootstrap模式？

2 个答案: