jschr ブートストラップ モーダル プラグイン ( 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/
残念ながら、モーダルがフィドル ブラウザ ウィンドウの上部にドッキングされて開くため、私が行っていることの表現が不十分です....そのため、フィドルでは、高さは動的ですが、位置はそうではありません....
ありがとう！