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

时间:2013-04-22 16:39:10

标签: javascript jquery html css twitter-bootstrap

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

15 个答案:

答案 0 :(得分:105)

这对我有用,以上都没有。

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

答案 1 :(得分:104)

由于您的内容必须是动态的,您可以在模式的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 instance方法时会立即触发此事件。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。
  • shown.bs.modal 当模式对用户可见时将触发此事件(将等待CSS过渡完成)。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。
  • hide.bs.modal 调用hide实例方法后会立即触发此事件。
  • hidden.bs.modal 当模态完成对用户隐藏时将触发此事件(将等待CSS过渡完成)。
  • loaded.bs.modal 当模式使用远程选项加载内容时会触发此事件。

支持较旧版本的bootstrap modal events

  • 显示 - 调用show instance方法时会立即触发此事件。
  • 显示 - 当模式对用户可见时将触发此事件(将等待css过渡完成)。
  • 隐藏 - 调用隐藏实例方法后立即触发此事件。
  • 隐藏 - 当模态完成对用户的隐藏时将触发此事件(将等待css转换完成)​​。

答案 2 :(得分:22)

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

答案 3 :(得分:8)

用于bootstrap 3使用

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

答案 4 :(得分:6)

如果你想写css然后添加以下

,有很多方法可以做到这一点
.modal-dialog{
  display: table
}

如果您想添加内联

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

不要将display:table;添加到模态内容类。它完成了你的工作,但处理大尺寸的模态看下面的截图。 如果您将样式添加到模态对话框,则第一个图像 In case if you add style to modal-dialog 如果你将样式添加到模态内容。看起来很好看。 enter image description here

答案 5 :(得分:5)

简单的Css为我工作

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

答案 6 :(得分:1)

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

&#13;
&#13;
$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});
&#13;
<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>
&#13;
&#13;
&#13;

如果将resizable设置为true,也可以允许用户控制大小。您可以在http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

查看有关此演示的演示

答案 7 :(得分:1)

我只是覆盖了css:

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

答案 8 :(得分: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;');
  });

答案 9 :(得分:0)

我遇到了与bootstrap 3相同的问题,并且模态体div的高度不希望大于442px。在我的案例中,这就是修复它所需要的所有css:

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

答案 10 :(得分:0)

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

答案 11 :(得分:0)

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

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

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

答案 12 :(得分:0)

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

答案 13 :(得分:0)

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

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

因此,如果您希望将 modal 宽度调整为更大的某个宽度,我建议例如在您的CSS中使用它:

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

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

答案 14 :(得分:0)

我的搜索将我引到了这里,所以不妨加上我两分钱的想法。如果您使用的是Monkey friendly Twitter Bootstrap modal,则可以执行以下操作:

import pandas as pd
import dask.dataframe as dd

d = {'col1': [1, 2, 3, 4], 'col2': [5, 6, 7, 8]}
df = pd.DataFrame(data=d)
ddf = dd.from_pandas(df, npartitions=2)
ddf.groupby(['col1']).col2.nunique().to_frame().compute()

希望这会有所帮助。