由于您的内容必须是动态的,因此可以在模态show
事件发生时动态设置模态的css属性,这将调整模态的大小,从而覆盖其默认规格。被引导的原因是使用css规则将最大高度应用于模态主体,如下所示:
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
对于较新版本的引导程序,请使用 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](http://jsfiddle.net/GDVdN/)
较新版本的bootstrap请参阅可用的event names
。
[modal events](http://twitter.github.io/bootstrap/javascript.html#modals)
支持较旧版本的引导程序。