1

我使用嵌套在 .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…&lt;/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" />
4

1 回答 1

0

找到了。我在页面的其他地方有一个 jquery 选择器，该选择器的选择超出了应有的范围。它正在捕获我的模态锚点上的点击事件并覆盖默认行为。感谢大家的帮助/输入。

于 2012-05-02T19:58:43.087 回答