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

101

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

这是我的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>

— 埃德姆·埃斯（Erdem Ece）
source

112

由于您的内容必须是动态的，因此可以在模态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

较新版本的bootstrap请参阅可用的event names。

show.bs.modal 调用show instance方法时，将立即触发此事件。如果是由单击引起的，则clicked元素可用作事件的relatedTarget属性。
shown.bs.modal 当模式对用户可见时将触发此事件（将等待CSS转换完成）。如果是由单击引起的，则clicked元素可用作事件的relatedTarget属性。
hide.bs.modal 调用hide实例方法后，立即触发此事件。
hidden.bs.modal 模态已向用户隐藏（当等待CSS转换完成时），将触发此事件。
load.bs.modal 当模态使用remote选项加载了内容时，将触发此事件。

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

Show-调用show实例方法时，将立即触发此事件。
显示 -当模式对用户可见时将触发此事件（将等待CSS转换完成）。
hide-调用hide实例方法后，立即触发此事件。
hidden-模态已完成向用户隐藏（将等待CSS转换完成）时，将引发此事件。

— PSL
source

我必须将#modal更改为与.moda-body相同，现在它可以正常工作。非常感谢你！

— Erdem Ece 2013年

8

@ PSL，+ 1表示答案，并将我介绍给kbd。

— Rolando Isidoro 2013年

看起来表演活动无法正常工作。这项工作：$('#modal').on('show.bs.modal', function () { getbootstrap.com/javascript/#modals-events

— joym8

+1表示细节，可容纳新旧事物。现在，即使它不只是填满屏幕的整个宽度，而且实际上是动态的。

— 发光的

@PSL在运行时如何控制模态的宽度？我的意思是使用JavaScript将其变小还是变大？

— Sredny M Casanova

119

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

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

— 阿米特·莎（Amit Shah）
source

2

@GreenAsJade可以通过此链接帮助您了解：colintoh.com/blog/display-table-anti-hero iandevlin.com/blog/2013/06/css/css-stacking-with-display-table

— Amit Shah

1

@maheshreddy欢迎，如果有帮助，请不要忘记投票+1。因此其他人可以对此答案给予更多信任并尝试一下。

— 阿米特·沙

它动态设置高度，但是这一次模态对话框在屏幕左侧打开。如何解决？

— 杰克

1

但这不适用于响应式移动视图。在笔记本电脑的屏幕上运行非常不错。

— chetan

4

这项工作有效，但是它产生了意外的影响，即模式不再在页面中垂直居中。没什么大不了的，但是我想我要提些什么。

— 约翰·阿拉德

22

我无法获得PSL的答案，因此我发现我所要做的就是将div包含模态内容style="display: table;"。模态内容本身说明了它想要多大，模态容纳了它。

— 发光的
source

5

我也无法得到PSL的答案。（也许是因为我使用的是Angular版本的bootstrap）。请注意，此样式已添加到.modal-dialog类+1

— user227353

我将您的解决方案应用于具有“ modal-content”类的div，为我工作。

— Mehdi

10

有多种方法可以执行此操作，如果您想编写CSS然后添加以下内容

.modal-dialog{
  display: table
}

如果要添加内联

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

不要添加display:table;到模式内容类。它完成了您的工作，但为大尺寸布置了模态，请参见以下屏幕截图。第一张图片是如果您向modal-dialog 添加样式，如果您向modal-content添加样式。它看起来性格开朗。

— 瓦卡斯·阿里
source

7

对于bootstrap 3使用像

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

— 用户名
source

4

只是添加到此hidden.bs.modal将在模式关闭后触发。触发模态时，使用show.bs.modal在引导程序3上触发。

— d3c0y 2013年

这将如何以任何方式或形式调整对话框的大小？它只是一个隐藏模式对话框（或显示）时触发的回调函数。

— user1438038

4

简单的CSS为我工作

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

— 帕斯卡
source

2

我只是覆盖CSS：

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

— 安德鲁·盖尔
source

2

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

— Subhashis Pal
source

1

如果您使用gijgo.com的jquery对话框插件并将宽度设置为auto，则可以执行此操作。

$("#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中查看有关此的演示

— 阿塔纳斯·阿塔纳索夫
source

1

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

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

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

— 柯克·罗斯
source

0

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

— 苏达
source

0

我对bootstrap 3和模式主体div的高度都不想大于442px遇到同样的问题。在我的情况下，这就是修复该问题所需的所有CSS：

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

— 布雷特·德雷克（Brett Drake）
source

0

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

— 富泉
source

0

从Bootstrap 4开始-它具有以下样式：

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

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

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

请注意，该设置width: 87vw;不会覆盖bootstrap的max-width: 500px;。

— 祖基菲
source

0

我的搜索将我引到了这里，所以不妨加上我两分钱的想法。如果您使用的是Monkey友好的Twitter Bootstrap模态，则可以执行以下操作：

    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();

希望这可以帮助。

— jpllosa
source