我有数据库内容,其中包含不同类型的数据,例如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>
由于您的内容必须是动态的,因此可以在模态show事件发生时动态设置模态的css属性,这将调整模态的大小,从而覆盖其默认规格。被引导的原因是使用css规则将最大高度应用于模态主体,如下所示:
show
.modal-body { position: relative; overflow-y: auto; max-height: 400px; padding: 15px; }
因此,您可以使用jquery css方法动态添加内联样式:
css
对于较新版本的引导程序,请使用 show.bs.modal
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到您的目标模态。
autoModal
在小提琴中动态更改内容,您将看到模态相应地调整大小。 [Demo](http://jsfiddle.net/GDVdN/)
[Demo](http://jsfiddle.net/GDVdN/)
较新版本的bootstrap请参阅可用的event names。
event names
[modal events](http://twitter.github.io/bootstrap/javascript.html#modals)支持较旧版本的引导程序。
[modal events](http://twitter.github.io/bootstrap/javascript.html#modals)