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

【问题标题】：How to resize Twitter Bootstrap modal dynamically based on the content如何根据内容动态调整 Twitter Bootstrap 模式的大小
【发布时间】：2013-04-15 15:50:10
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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

较新版本的引导程序请参阅可用的event names。

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 实例方法时立即触发。
显示 - 当模式对用户可见时触发此事件（将等待 css 转换完成）。
hide - 当调用 hide 实例方法时立即触发此事件。
hidden - 当模式对用户完成隐藏时触发此事件（将等待 css 转换完成）。

【讨论】：

我不得不将 #modal 更改为与 .moda-body 相同的内容，现在它可以完美运行。非常感谢！
@PSL，+1 的答案，并在 SO 中将我介绍给 kbd。
看起来显示事件不起作用。这工作：$('#modal').on('show.bs.modal', function () {getbootstrap.com/javascript/#modals-events
+1 了解细节并适应新旧。现在只要它不只是填满屏幕的整个宽度并且实际上是动态的大小。
@PSL 在运行时如何控制模态框的宽度？我的意思是用 JavaScript 让它变小或变大？

【解决方案2】：

对于 bootstrap 3 使用类似

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

【讨论】：

只是添加到这个 hidden.bs.modal 将在模态关闭后触发。触发模式时，使用 show.bs.modal 在引导程序 3 上触发。
这将如何以任何方式或形式调整对话框的大小？它只是一个回调函数，当模态对话框隐藏（或显示）时触发。

【解决方案3】：

简单的 Css 适合我

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

【讨论】：

【解决方案4】：

我无法让 PSL 的答案为我工作，所以我发现我所要做的就是将包含模态内容的 div 设置为 style="display: table;"。模态内容本身说明了它想要多大，并且模态可以容纳它。

【讨论】：

我也无法得到 PSL 的答案。（也许是因为我使用的是 Angular 版本的引导程序）这对我有用。请注意，这种样式是在 .modal-dialog 类中添加的 +1
我将您的解决方案应用于具有“modal-content”类的 div，为我工作。

【解决方案5】：

这对我有用，以上都不起作用。

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

【讨论】：

@GreenAsJade 这个链接可以帮助你理解：colintoh.com/blog/display-table-anti-hero iandevlin.com/blog/2013/06/css/css-stacking-with-display-table
@maheshreddy 欢迎，如果有帮助别忘了投票 +1。所以其他人可以更加信任这个答案并尝试一下。
它动态设置高度，但这次模态对话框在屏幕左侧打开。如何解决？
但这不适用于响应式移动视图。它在笔记本电脑屏幕上工作得很好。
这行得通，但它产生了模态不再垂直居中在页面中的意外影响。没什么大不了的，但我想我会提点什么。

【解决方案6】：

对于 Bootstrap 2 自动动态调整模型高度

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

【讨论】：

【解决方案7】：

如果您使用来自 gijgo.com 的 jquery 对话框插件并将宽度设置为自动，则可以这样做。

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

如果您将 resizable 设置为 true，您还可以允许用户控制大小。你可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable看到一个关于这个的演示

【讨论】：

【解决方案8】：

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

.modal-dialog{
  display: table
}

如果你想添加内联

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

不要将 display:table; 添加到 modal-content 类。它完成了您的工作，但将您的模态配置为大尺寸请参见以下屏幕截图。第一张图片是如果您将样式添加到模态对话框如果您将样式添加到模态内容。它看起来很有个性。

【讨论】：

【解决方案9】：

我在 bootstrap 3 和模态体 div 的高度不希望大于 442px 时遇到了同样的问题。在我的情况下，这就是修复它所需的所有 css：

.modal-body {
    overflow-y: auto;
}

【讨论】：

【解决方案10】：

我只是覆盖了css：

.modal-dialog {
    max-width: 1000px;
}

【讨论】：

【解决方案11】：

我的解决方案只是添加以下样式。 <div class="modal-body" style="clear: both;overflow: hidden;">

【讨论】：

【解决方案12】：

一个简单的 CSS 解决方案，将模式垂直和水平居中：

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

【讨论】：

【解决方案13】：

在模态 div 上设置 width:fit-content。

【讨论】：

【解决方案14】：

从 Bootstrap 4 开始 - 它的风格为：

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

因此，如果您希望将 modal 宽度调整为更大的宽度，我建议您在 css 中使用它，例如：

.modal-dialog { max-width: 87vw; }

注意设置width: 87vw;不会覆盖引导程序的max-width: 500px;。

【讨论】：

【解决方案15】：

我的搜索把我带到了这里，所以不妨加上我的两美分的想法。如果您使用的是Monkey friendly Twitter Bootstrap modal，那么您可以执行以下操作：

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

希望这会有所帮助。

【讨论】：