小编典典

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

css

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

阅读 286

收藏
2020-05-16

共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转换完成)​​。
2020-05-16