.tabbable div 内にネストされた Twitter ブートストラップ モーダル プラグインを使用した次のマークアップがあります。
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tabPeople" data-toggle="tab">People</a></li>
<li><a href="#tabRoles" data-toggle="tab">Roles</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabPeople">
<a data-toggle="modal" href="#modalEditPerson1">Name</a>
<div class="modal hide fade in" id="modalEditPerson1">
<div class="modal-header">
<button class="close" data-dismiss="modal">
×</button>
<h3>
Name</h3>
</div>
<div class="modal-body">
<p>
One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">
Save changes</a>
</div>
</div>
</div>
<div class="tab-pane" id="tabRoles">
<p>
Role stuff here.</p>
</div>
</div>
</div>
これによりモーダルが表示されますが、このページのデモのようにフェードしません: http://twitter.github.com/bootstrap/javascript.html#modals
.tabbable 要素内にネストされていない場合は正常に機能します
ヘッダーには次のものが含まれます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="styles/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<link href="/styles/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />