如何根据内容dynamic调整Twitter Bootstrap模式
我有数据库内容有不同types的数据，如Youtubevideo，Vimeovideo，文本，Imgur图片等，他们都有不同的高度和宽度。 我在search互联网时发现的所有内容都只是将大小改为只有一个参数。 它必须与popup窗口中的内容相同。
这是我的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> 由于您的内容必须是dynamic的，您可以在模态的show事件中dynamic设置模态的css属性，这将重新调整模式的大小，覆盖其默认规格。 正在引导的原因是通过css规则将最大高度应用于模态体，如下所示：
.modal-body { position: relative; overflow-y: auto; max-height: 400px; padding: 15px; }
所以你可以使用jQuery的css方法dynamic地添加内联样式：
对于较新版本的bootstrap，使用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%' }); });
对于较旧版本的bootstrap使用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到你的目标模态。
在小提琴里dynamic地改变内容，你会看到相应的模式被调整。 演示
较新版本的bootstrap查看可用的event names 。
- show.bs.modal当show instance方法被调用时，这个事件立即触发。 如果由于点击而导致点击的元素可用作事件的relatedTarget属性。
- shown.bs.modal当模式已经被用户看到时（等待CSS转换完成），这个事件被触发。 如果由于点击而导致点击的元素可用作事件的relatedTarget属性。
- hide.bs.modal当调用隐藏实例方法时立即触发此事件。
- hidden.bs.modal当模式完成对用户的隐藏时，会触发此事件（等待CSS转换完成）。
- loaded.bs.modal当模式使用远程选项加载内容时，会触发此事件。
较旧版本的引导模态事件支持。
- Show – Show事件方法被调用时，该事件立即触发。
- 显示 – 当模式已经被用户看到（将等待css转换完成）时，该事件被触发。
- hide – 隐藏实例方法被调用时，立即触发此事件。
- 隐藏 – 当模式完成对用户的隐藏时，会触发此事件（将等待css转换完成）。
这工作对我来说，以上都没有工作。
.modal-dialog{ position: relative; display: table; /* This is important */ overflow-y: auto; overflow-x: auto; width: auto; min-width: 300px; }
我无法得到PSL的答案为我工作，所以我发现我所要做的就是设置div的模式内容与style="display: table;" 。 模态内容本身说明它要多大，模态适应它。
为bootstrap 3使用像
$('#myModal').on('hidden.bs.modal', function () { // do something… })
有很多方法可以做到这一点，如果你想写的CSS然后添加以下内容
.modal-dialog{ display: table }
如果你想添加内联
<div class="modal-dialog" style="display:table;"> //enter code here </div>
不要添加display:table; 到模态内容类。 它完成了你的工作，但处置你的模态大尺寸请参阅以下截图。 第一个图像是如果你添加风格的模式对话框 
如果你添加风格的模态内容。 它看起来被处置。 
简单的Css为我工作
.modal-dialog { max-width : 100% ; }
你可以做到这一点，如果你使用gijgo.com的jQuery对话框插件，并将宽度设置为自动。
$("#dialog").dialog({ uiLibrary: 'bootstrap', width: 'auto' });
<html> <head> <script src="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" width="320"/> </div> </body> </html>
对于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;'); });
我有bootstrap 3的相同的问题和模式身体div的高度不希望大于442px。 这是所有需要修复它在我的情况下的CSS：
.modal-body { overflow-y: auto; }
