如何根据内容动态调整 Twitter Bootstrap 模式的大小
Posted
技术标签:
【中文标题】如何根据内容动态调整 Twitter Bootstrap 模式的大小【英文标题】：How to resize Twitter Bootstrap modal dynamically based on the content 【发布时间】：2013-04-15 15:50:10 【问题描述】：我的数据库内容包含不同类型的数据，例如 Youtube 视频、Vimeo 视频、文本、Imgur 图片等。它们都有不同的高度和宽度。我在互联网上搜索时发现的只是将大小更改为只有一个参数。它必须与弹出窗口中的内容相同。
这是我的 html 代码。我也使用 Ajax 来调用内容。
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="ModalLabel"></h3>
</div>
<div class="modal-body">
</div>
</div>
【问题讨论】：
【参考方案1】：由于您的内容必须是动态的，您可以在模态的show 事件上动态设置模态的 css 属性，这将重新调整模态的大小以覆盖其默认规范。引导的原因是使用以下 css 规则将最大高度应用于模态体：
.modal-body
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
所以你可以使用 jquery css 方法动态添加内联样式：
对于较新版本的引导程序，请使用 show.bs.modal
$('#modal').on('show.bs.modal', function ()
$(this).find('.modal-body').css(
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
);
);
对于旧版本的引导程序，请使用 show
$('#modal').on('show', function ()
$(this).find('.modal-body').css(
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
);
);
或使用css规则覆盖：
.autoModal.modal .modal-body
max-height: 100%;
并将此类 autoModal 添加到您的目标模式中。
在小提琴中动态更改内容，您将看到模态相应地调整大小。 Demo
较新版本的引导程序请参阅可用的event names。
支持旧版引导程序modal events。
Show - 此事件在调用 show 实例方法时立即触发。 显示 - 当模式对用户可见时触发此事件（将等待 css 转换完成）。 hide - 当调用 hide 实例方法时立即触发此事件。 hidden - 当模式对用户完成隐藏时触发此事件（将等待 css 转换完成）。【讨论】：
我不得不将 #modal 更改为与 .moda-body 相同的内容，现在它可以完美运行。非常感谢！ @PSL，+1 的答案，并在 SO 中将我介绍给 kbd。 看起来显示事件不起作用。这工作：$('#modal').on('show.bs.modal', function () getbootstrap.com/javascript/#modals-events
+1 了解细节并适应新旧。现在只要它不只是填满屏幕的整个宽度并且实际上是动态的大小。
@PSL 在运行时如何控制模态框的宽度？我的意思是用 JavaScript 让它变小或变大？【参考方案2】：
对于 bootstrap 3 使用类似
$('#myModal').on('hidden.bs.modal', function ()
// do something…
)
【讨论】：
只是添加到这个 hidden.bs.modal 将在模态关闭后触发。触发模式时，使用 show.bs.modal 在引导程序 3 上触发。 这将如何以任何方式或形式调整对话框的大小？它只是一个回调函数，当模态对话框隐藏（或显示）时触发。【参考方案3】：简单的 Css 适合我
.modal-dialog
max-width : 100% ;
【讨论】：
【参考方案4】：我无法让 PSL 的答案为我工作，所以我发现我所要做的就是将包含模态内容的 div 设置为 style="display: table;"。模态内容本身说明了它想要多大，并且模态可以容纳它。
【讨论】：
我也无法得到 PSL 的答案。 （也许是因为我使用的是 Angular 版本的引导程序）这对我有用。请注意，这种样式是在 .modal-dialog 类中添加的 +1 我将您的解决方案应用于具有“modal-content”类的 div，为我工作。【参考方案5】：这对我有用，以上都不起作用。
.modal-dialog
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
【讨论】：
@GreenAsJade 这个链接可以帮助你理解：colintoh.com/blog/display-table-anti-heroiandevlin.com/blog/2013/06/css/css-stacking-with-display-table @maheshreddy 欢迎，如果有帮助别忘了投票 +1。所以其他人可以更加信任这个答案并尝试一下。 它动态设置高度，但这次模态对话框在屏幕左侧打开。如何解决？ 但这不适用于响应式移动视图。它在笔记本电脑屏幕上工作得很好。 这行得通，但它产生了模态不再垂直居中在页面中的意外影响。没什么大不了的，但我想我会提点什么。【参考方案6】：对于 Bootstrap 2 自动动态调整模型高度
//Auto adjust modal height on open
$('#modal').on('shown',function()
var offset = 0;
$(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
);
【讨论】：
【参考方案7】：如果您使用来自 gijgo.com 的 jquery 对话框插件并将宽度设置为自动，则可以这样做。
$("#dialog").dialog(
uiLibrary: 'bootstrap',
width: 'auto'
);<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
<script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Wikipedia">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" />
</div>
</body>
</html>如果您将 resizable 设置为 true，您还可以允许用户控制大小。你可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable看到一个关于这个的演示
【讨论】：
【参考方案8】：如果你想写css，有很多方法可以做到这一点，然后添加以下
.modal-dialog
display: table
如果你想添加内联
<div class="modal-dialog" style="display:table;">
//enter code here
</div>
不要将 display:table; 添加到 modal-content 类。它完成了您的工作，但将您的模态配置为大尺寸请参见以下屏幕截图。
第一张图片是如果您将样式添加到模态对话框
如果您将样式添加到模态内容。它看起来很有个性。
【讨论】：
【参考方案9】：我在 bootstrap 3 和模态体 div 的高度不希望大于 442px 时遇到了同样的问题。在我的情况下，这就是修复它所需的所有 css：
.modal-body
overflow-y: auto;
【讨论】：
【参考方案10】：我只是覆盖了css：
.modal-dialog
max-width: 1000px;
【讨论】：
【参考方案11】：我的解决方案只是添加以下样式。
<div class="modal-body" style="clear: both;overflow: hidden;">
【讨论】：
【参考方案12】：一个简单的 CSS 解决方案，将模式垂直和水平居中：
.modal.show
display: flex !important;
justify-content: center;
.modal-dialog
align-self: center;
【讨论】：
【参考方案13】：在模态 div 上设置 width:fit-content。
【讨论】：
【参考方案14】：从 Bootstrap 4 开始 - 它的风格为：
@media (min-width: 576px)
.modal-dialog
max-width: 500px;
因此，如果您希望将 modal 宽度调整为更大的宽度，我建议您在 css 中使用它，例如：
.modal-dialog max-width: 87vw;
注意设置width: 87vw;不会覆盖引导程序的max-width: 500px;。
【讨论】：
【参考方案15】：我的搜索把我带到了这里，所以不妨加上我的两美分的想法。如果您使用的是Monkey friendly Twitter Bootstrap modal，那么您可以执行以下操作：
var dialog = new BootstrapDialog(
id: 'myDialog',
title: 'Title',
closable: false,
// whatever you like configuration here...
);
dialog.realize();
if (isContentAYoutubeVideo())
dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
dialog.open();
希望这会有所帮助。
【讨论】：
以上是关于如何根据内容动态调整 Twitter Bootstrap 模式的大小的主要内容，如果未能解决你的问题，请参考以下文章
如何根据动态内容调整 textview 和 scrollview 内容大小
如何根据ios 8中的内容动态调整UITableview Header高度
css 来自http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/