Bootstrap modal с динамическим расположением вкладок/высотой

Question

Я использую jschr bootstrap modal plugin (https://github.com/jschr/bootstrap-modal) для создания модалов на моем сайте. Прежде всего, мне нравится плагин, он делает модальные все классные вещи, которые я бы хотел, но я использую модальности следующим образом, который не совсем работает, как я хочу:

В основном , Я хочу реализовать динамическое положение модальности, когда модаль содержит вкладки. Таким образом, в приведенном ниже примере модальная в настоящее время ВСЕГДА будет установлена ​​@ позиция первой активной вкладки, независимо от длины содержимого на дополнительных вкладках. В основном, то, что мне нужно, - это когда вкладка изменяется для изменения модальности в центр окна с новой высотой ... любые идеи о том, как это сделать?

<a href="#CustomerDetailsModal" data-toggle="modal">Open modal</a> 

<div id="CustomerDetailsModal" class="modal hide" > 
<div class="modal-header"> 
    <button data-dismiss="modal" class="close" type="button">×</button> 
    <h3>Customer Details</h3> 
</div> 
<div class="modal-body" > 
<ul class="nav nav-tabs"> 
<li class="active"><a data-toggle="tab" href="#CustomerDetails">MY CUSTOMER</a></li> 
<li ><a data-toggle="tab" href="#Users">Users</a></li> 
<li ><a data-toggle="tab" href="#Activity">OUTRAGEOUSLY LONG CONTENT HERE.</a></li> 
</ul> 
<div class="tab-content" id="customerdetails" > 

<div id="CustomerDetails" class="tab-pane active" > 

<div class="form-horizontal"> 
    <div class="control-group">  
    <div class="control-label"> 
      Company 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay">CUSTOMER INFO</span> 
    </div> 
</div> 
    <div class="control-group">  
    <div class="control-label"> 
      CompanyAlias 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay"></span> 
    </div> 
</div> 
    <div class="control-group">  
    <div class="control-label"> 
      Address 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay">123 ME ST</span> 
    </div> 
</div> 
    <div class="control-group">  
    <div class="control-label"> 
      City 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay">SURFSIDE BEACH</span> 
    </div> 
</div> 
    <div class="control-group">  
    <div class="control-label"> 
      State 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay">SC</span> 
    </div> 
</div> 
    <div class="control-group">  
    <div class="control-label"> 
      Zip 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay">29575</span> 
    </div> 
</div> 
    <div class="control-group">  
    <div class="control-label"> 
      Phone 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay">555-555-5555</span> 
    </div> 
</div> 
    <div class="control-group">  
    <div class="control-label"> 
      Bill To Email 
    </div> 
    <div class="controls"> 
     <span class="detailsDisplay">CUSTOMER@EMAIL</span> 
    </div> 
</div> 
</div> 
</div> 
<div id="Users" class="tab-pane" > 
<table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>Create Date</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>E-mail</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
       <td>9/9/2013 10:14:48 PM</td> 
       <td>MY</td> 
       <td>CUSTOMER</td> 
       <td>CUSTOMER@EMAIL.COM</td> 
     </tr> 
    </tbody> 
</table> 
</div> 
<div id="Activity" class="tab-pane" style="padding: 0; margin: 0;"> 
<table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>Date</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
     <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD> 
    </tbody> 
</table> 
</div> 
</div> 
</div> 
<div class="modal-footer"> 
    <a data-dismiss="modal" class="btn" href="#">Close</a> 
</div> 
</div> 

JSFiddle: Я добавил скрипку вы можете получить сюда: http://jsfiddle.net/valvemail/ML6Xp/3/

К сожалению, это плохое представление о том, что я делаю, потому что модальный открывает пристыкован в верхней части скрипичной окна браузера штуковина. ... так что в скрипке высота динамическая, но позиция не ...

Спасибо!

Answer 1

Итак, родственный дух сегодня столкнулся с подобной проблемой и опубликовал github bootstrap modal. Решение это https://github.com/jschr/bootstrap-modal/issues/207

/* after the tab changes: 
$("#CustomerDetailsModal").modal('layout'); 

и вуаля Chango это центрирует.