如何根据内容动态调整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

这对我有用,上述都没有奏效.

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Answer 2

由于您的内容必须是动态的,您可以在模态的show事件上动态设置模态的css属性,该模式将重新调整模态的大小,覆盖其默认规范.原因是bootstrap使用css规则将max-height应用于模态体,如下所示:

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

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

对于较新版本的bootstrap使用 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%'
       });
});

对于旧版本的bootstrap使用 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

较新版本的bootstrap可以看到event names.

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

modal events 支持较旧版本的bootstrap .

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

Answer 3

我无法让PSL的答案为我工作所以我发现我所要做的就是设置包含模态内容的div style="display: table;".模态内容本身表示它想要的大小和模态适应它.

Answer 4

对于bootstrap 3使用像

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Answer 5

如果你想编写css然后添加以下内容,有很多方法可以做到这一点

.modal-dialog{
  display: table
}

如果您想添加内联

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

不要添加display:table;到modal-content类.它完成了你的工作,但处理大尺寸的模态看下面的截图.如果您将样式添加到模态对话框,则第一个图像 如果你将样式添加到模态内容.看起来很好看.

Answer 6

简单的Css为我工作

.modal-dialog { 
max-width : 100% ;
}