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

问题描述

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

这是我的 HTML 代码.我也是用 Ajax 来调用内容.

<div id="modal" class="modal hidefade" 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 class="modal-body">

解决方案

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

.modal-body {位置:相对；溢出-y:自动；最大高度:400px；填充:15px；}

因此您可以使用 jquery css 方法动态添加内联样式:

对于较新版本的引导程序，请使用 show.bs.modal

$('#modal').on('show.bs.modal', function () {$(this).find('.modal-body').css({width:'auto',//可能不需要height:'auto',//可能不需要'最大高度':'100%'});});

对于旧版本的引导程序，请使用 show

$('#modal').on('show', function () {$(this).find('.modal-body').css({width:'auto',//可能不需要height:'auto',//可能不需要'最大高度':'100%'});});

或使用 css 规则覆盖:

.autoModal.modal .modal-body{最大高度:100%；}

并将此类 autoModal 添加到您的目标模态.

在小提琴中动态更改内容，您将看到模态相应地调整大小.演示

较新版本的引导程序请参阅可用的事件名称.

• show.bs.modal 该事件在调用 show 实例方法时立即触发.如果由点击引起，则被点击的元素可用作事件的 relatedTarget 属性.
• shown.bs.modal 当模态对用户可见时会触发此事件(将等待 CSS 转换完成)​​.如果由点击引起，则被点击的元素可用作事件的 relatedTarget 属性.
• hide.bs.modal 调用 hide 实例方法时会立即触发此事件.
• hidden.bs.modal 当模态完成对用户隐藏时触发此事件(将等待 CSS 转换完成)​​.
• loaded.bs.modal 当模态使用远程选项加载内容时会触发此事件.

旧版本的引导程序 modal events 支持.

• Show - 该事件在调用 show 实例方法时立即触发.
• shown - 当模态对用户可见时会触发此事件(将等待 css 转换完成)​​.
• hide - 当调用 hide 实例方法时立即触发此事件.
• hidden - 当模态完成对用户隐藏时触发此事件(将等待 css 转换完成)​​.

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.

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> 

解决方案

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

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

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%'
       });
});

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%'
       });
});

or use a css rule to override:

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

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