如何根据内容动态调整Twitter Bootstrap模式的大小

Question

我有数据库内容，其中包含不同类型的数据，例如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>

Answer 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](http://jsfiddle.net/GDVdN/)

较新版本的bootstrap请参阅可用的event names。

• 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转换完成）​​。