jQuery Bootstrap 3 - 根据屏幕大小设置模态窗口的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19140702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - set height of modal window according to screen size
提问by Ralf Glaser
I am trying to create a kind of responsive megamenu using Bootstrap 3 modal dialog. I would like to set the width and height of the whole modal window to 80% of the viewport, while setting the modal-body to a max-height in order not to populate the whole screen on large viewports.
我正在尝试使用 Bootstrap 3 模态对话框创建一种响应式 megamenu。我想将整个模态窗口的宽度和高度设置为视口的 80%，同时将模态体设置为最大高度，以免在大视口上填充整个屏幕。
My HTML:
我的 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>
My CSS:
我的CSS：
.modal-megamenu {
width:80%;
height:80%;
}
.modal-body {
max-height:500px;
overflow:auto;
}
This works as intended for the width, but the "height" parameter doesn't give any result. Like that, the height of the modal window is always set to the max-height value. Does anybody have an idea of how to set the height dynamically according to the viewport height?
这适用于宽度，但“高度”参数没有给出任何结果。像这样，模态窗口的高度总是设置为 max-height 值。有人知道如何根据视口高度动态设置高度吗？
回答by Daniel Garmoshka
回答by Ryand.Johnson
Similar to Bass, I had to also set the overflow-y. That could actually be done in the CSS
与低音类似，我还必须设置溢出-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);
});
回答by Bass Jobsen
Try:
尝试：
$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('height',$( window ).height()*0.8);
});
回答by Tiago
To expand on Ryand's answer, if you're using Bootstrap.ui, this on your modal-instance will do the trick:
为了扩展 Ryand 的答案，如果您使用的是 Bootstrap.ui，那么您的 modal-instance 上的这个就可以解决问题：
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);
});
回答by keaukraine
I assume you want to make modal use as much screen space as possible on phones. I've made a plugin to fix this UX problem of Bootstrap modals on mobile phones, you can check it out here - https://github.com/keaukraine/bootstrap-fs-modal
我假设您希望在手机上使用尽可能多的屏幕空间。我制作了一个插件来解决手机上 Bootstrap modals 的这个 UX 问题，你可以在这里查看 - https://github.com/keaukraine/bootstrap-fs-modal
All you will need to do is to apply modal-fullscreenclass and it will act similar to native screens of iOS/Android.
您需要做的就是应用modal-fullscreen类，它的行为类似于 iOS/Android 的本机屏幕。
回答by Sibtain
I am using jquery for this. I mad a function to set desired height to the modal(You can change that according to your requirement).
Then I used Modal Shown event to call this function.
Remember not to use $("#modal").show()rather use $("#modal").modal('show')otherwise shown.bs.modal will not be fired.
我为此使用jquery。我疯狂地将所需高度设置为模态的功能（您可以根据您的要求进行更改）。然后我使用 Modal Shown 事件来调用这个函数。
记住不要使用$("#modal").show()而是使用$("#modal").modal('show')否则显示的.bs.modal 不会被触发。
That all I have for this scenario.
这就是我对这个场景所拥有的一切。
var offset=250; //You can set offset accordingly based on your UI
function AdjustPopup()
{
$(".modal-body").css("height","auto");
if ($(".modal-body:visible").height() > ($(window).height() - offset))
{
$(".modal-body:visible").css("height", ($(window).height() - offset));
}
}
//Execute the function on every trigger on show() event.
$(document).ready(function(){
$('.modal').on('shown.bs.modal', function (e) {
AdjustPopup();
});
});
//Remember to show modal like this
$("#MyModal").modal('show');