由于您的内容必须是动态的,因此可以在模态
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](http://jsfiddle.net/GDVdN/)
较新版本的bootstrap请参阅可用的
eventnames。
- show.bs.modal 调用show实例方法时,将立即触发此事件。如果是由单击引起的,则clicked元素可用作事件的relatedTarget属性。
- shown.bs.modal 当模态对用户可见时将触发此事件(将等待CSS转换完成)。如果是由单击引起的,则clicked元素可用作事件的relatedTarget属性。
- hide.bs.modal 调用hide实例方法后,立即触发此事件。
- hidden.bs.modal 模态已向用户隐藏(当等待CSS转换完成时),将触发此事件。
- load.bs.modal 当模态使用remote选项加载了内容时,将触发此事件。
[modal events](http://twitter.github.io/bootstrap/javascript.html#modals)支持较旧版本的引导程序。
- Show- 调用show实例方法时,立即触发此事件。
- 显示 -当模式对用户可见时将触发此事件(将等待CSS转换完成)。
- hide- 调用hide实例方法后,立即触发此事件。
- hidden- 模态已向用户隐藏完成时将触发此事件(将等待CSS转换完成)。



