【发布时间】:2012-05-02 10:41:33
【问题描述】:
我使用嵌套在 .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" />
【问题讨论】:
-
它对我来说工作正常,jsfiddle.net/WAnU8,你的 js 加载顺序是什么?
-
感谢您的回复。我在主帖中添加了js链接。
-
嗯,除了您应该首先加载引导样式表之外,一切都应该在您的设置中正常工作,但这只是一个问题。您是否对引导程序进行了任何修改?在我上面的小提琴中,一切都按预期运行股票引导样式表和插件,因此它必须是您设置中的其他内容。你可以在jsfiddle.net 重新创建你的设置来看看吗?
-
找到了。我有一个 jquery 选择器,它选择的比页面上其他地方的要多。它正在捕获我的模态锚点上的点击事件并覆盖默认行为。谢谢你的帮助。尽管您没有直接回答我的问题,但正是您的建议使我得到了答案。感谢那! (如果你把它放在一个答案中,我也可以标记它......)
-
只需在下面以答案的形式发布您的结果,并附上答案和发现并将其标记为正确,这样它就可以帮助未来的用户解决同样的问题。
标签: css html twitter-bootstrap modal-dialog