如何根据内容dynamic调整Twitter Bootstrap模式

我有数据库内容有不同types的数据,如Youtubevideo,Vimeovideo,文本,Imgur图片等,他们都有不同的高度和宽度。 我在search互联网时发现的所有内容都只是将大小改为只有一个参数。 它必须与popup窗口中的内容相同。

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

由于您的内容必须是dynamic的,您可以在模态的show事件中dynamic设置模态的css属性,这将重新调整模式的大小,覆盖其默认规格。 正在引导的原因是通过css规则将最大高度应用于模态体,如下所示:

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

所以你可以使用jQuery的css方法dynamic地添加内联样式:

对于较新版本的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到你的目标模态。

在小提琴里dynamic地改变内容,你会看到相应的模式被调整。 演示

较新版本的bootstrap查看可用的event names

  • show.bs.modal当show instance方法被调用时,这个事件立即触发。 如果由于点击而导致点击的元素可用作事件的relatedTarget属性。
  • shown.bs.modal当模式已经被用户看到时(等待CSS转换完成)​​,这个事件被触发。 如果由于点击而导致点击的元素可用作事件的relatedTarget属性。
  • hide.bs.modal当调用隐藏实例方法时立即触发此事件。
  • hidden.bs.modal当模式完成对用户的隐藏时,会触发此事件(等待CSS转换完成)​​。
  • loaded.bs.modal当模式使用远程选项加载内容时,会触发此事件。

较旧版本的引导模态事件支持。

  • ShowShow事件方法被调用时,该事件立即触发。
  • 显示 – 当模式已经被用户看到(将等待css转换完成)​​时,该事件被触发。
  • hide – 隐藏实例方法被调用时,立即触发此事件。
  • 隐藏 – 当模式完成对用户的隐藏时,会触发此事件(将等待css转换完成)​​。

这工作对我来说,以上都没有工作。

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

我无法得到PSL的答案为我工作,所以我发现我所要做的就是设置div的模式内容与style="display: table;" 。 模态内容本身说明它要多大,模态适应它。

为bootstrap 3使用像

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

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

 .modal-dialog{ display: table } 

如果你想添加内联

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

不要添加display:table; 到模态内容类。 它完成了你的工作,但处置你的模态大尺寸请参阅以下截图。 第一个图像是如果你添加风格的模式对话框 如果你添加样式到模态对话框 如果你添加风格的模态内容。 它看起来被处置。 在这里输入图像说明

简单的Css为我工作

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

你可以做到这一点,如果你使用gijgo.com的jQuery对话框插件,并将宽度设置为自动。

 $("#dialog").dialog({ uiLibrary: 'bootstrap', width: 'auto' }); 
 <html> <head> <script src="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> 

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

我有bootstrap 3的相同的问题和模式身体div的高度不希望大于442px。 这是所有需要修复它在我的情况下的CSS:

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