Bootstrap 3 – 根据屏幕大小设置模态窗口的高度

我正在尝试使用Bootstrap 3模式对话框创build一种响应式megamenu。 我想将整个模式窗口的宽度和高度设置为视口的80％，同时将模态主体设置为最大高度，以便不在大视口上填充整个屏幕。

我的HTML：

<div class="modal fade"> <div class="modal-dialog modal-megamenu"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <h4 class="modal-title">Modal Mega Menu Test</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> </div> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary">close</button> </div> </div> </div> 

我的CSS：

 .modal-megamenu { width:80%; height:80%; } .modal-body { max-height:500px; overflow:auto; } 

这可以像宽度那样工作，但“高度”参数不会给出任何结果。 像这样，模态窗口的高度始终设置为最大高度值。 有没有人有一个如何根据视口高度dynamic设置高度的想法？

Answer 1

与Bass类似，我也必须设置overflow-y。 这实际上可以在CSS中完成

 $('#myModal').on('show.bs.modal', function () { $('.modal .modal-body').css('overflow-y', 'auto'); $('.modal .modal-body').css('max-height', $(window).height() * 0.7); }); 

Answer 2

尝试：

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

Answer 3

纯粹的CSS解决scheme，使用calc

 .modal-body { max-height: calc(100vh - 200px); overflow-y: auto; } 

200px可以根据页眉和页脚的高度进行调整

Answer 4

为了扩大Ryand的答案，如果你使用的是Bootstrap.ui，那么在你的模式实例上就可以做到这一点：

  modalInstance.rendered.then(function (result) { $('.modal .modal-body').css('overflow-y', 'auto'); $('.modal .modal-body').css('max-height', $(window).height() * 0.7); $('.modal .modal-body').css('height', $(window).height() * 0.7); }); 

Answer 5

我假设你想在手机上使用尽可能多的屏幕空间。 我已经做了一个插件来解决在手机上引导模式这个用户体验问题，你可以在这里查看 – https://github.com/keaukraine/bootstrap-fs-modal

所有你需要做的就是应用modal-fullscreen类，它将起到类似于iOS / Android本地屏幕的作用。