如何根据内容动态调整Twitter Bootstrap模态大小 [英] How to resize Twitter Bootstrap modal dynamically based on the content

问题描述

我有数据库内容有不同类型的数据，如Youtube视频，Vimeo视频，文字，Imgur图片等。他们都有不同的高度和宽度。所有我在搜索互联网时发现，只是将大小更改为一个参数。它必须与弹出窗口中的内容相同。

I have database content which has different types of data, such as Youtube videos, Vimeo videos, text, Imgur pictures, etc. All of them have different heights and widths. All I have found while searching the Internet is changing the size to only one parameter. It has to be same as the content in the popup.

这是我的HTML代码。我也使用Ajax调用内容。

This is my HTML code. I also use Ajax to call the content.

<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> 

推荐答案

由于您的内容必须是动态的，您可以设置css模态的属性动态地在模态的 show 事件，这将重新调整模态覆盖其默认规格。原因是引导使用css规则将最大高度应用于模态体，如下所示：

Since your content must be dynamic you can set the css properties of the modal dynamically on show event of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

因此，您可以使用jquery css 方法：

So you can add inline styles dynamically using jquery css method:

对于较新版本的bootstrap使用 show.bs.modal p>

For newer versions of bootstrap use 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 / p>

For older versions of bootstrap use show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

或使用css规则覆盖：

or use a css rule to override:

.autoModal.modal .modal-body{
    max-height: 100%;
}

并添加此类 autoModal 到你的目标模式。

and add this class autoModal to your target modals.

在小提琴中动态改变内容，你会看到模态相应调整大小。 演示

Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo

新版本的引导请参阅可用的 事件名称 。

Newer version of bootstrap see the available event names.

• show.bs.modal 当调用show instance方法时，此事件立即触发。


• shown.bs.modal 如果点击造成的点击元素可用作事件的relatedTarget属性。对用户可见（将等待CSS转换完成）​​。


• hide.bs.modal 如果点击导致点击的元素作为事件的relatedTarget属性。


• hidden.bs.modal 当模式已完成对用户的隐藏时触发此事件（将等待CSS转换


• loaded.bs.modal 当模态使用远程选项加载内容时，会触发此事件。

• show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
• shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
• hide.bs.modal This event is fired immediately when the hide instance method has been called.
• hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
• loaded.bs.modal This event is fired when the modal has loaded content using the remote option.

旧版本的引导 模态事件

Older version of bootstrap modal events supported.

• 显示 - 当调用show实例方法时，此事件立即触发。


• 显示 - 当该模式对用户可见时会触发此事件（将等待css转换完成）​​。


• 隐藏 - 调用隐藏实例方法时会立即触发此事件。


• 隐藏当模态已完成对用户隐藏（将等待css转换完成）​​时触发。

• Show - This event fires immediately when the show instance method is called.
• shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
• hide - This event is fired immediately when the hide instance method has been called.
• hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

这篇关于如何根据内容动态调整Twitter Bootstrap模态大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！