Twitter Bootstrap：模态弹出窗口不会消失

Question

我使用 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 fade in" 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 fade" id="tabRoles">
                <p>
                    Role stuff here.</p>
            </div>
        </div>
    </div>

这会调出一个模态，但不会像本页演示中那样淡化它：http://twitter.github.com/bootstrap/javascript.html#modals

更新 我已经意识到问题在于它嵌套在一个也使用 .fade 的 .tabbable div 中 我已经更新了上面的html。

Answer 1

您可能忘记包含动画的 javascript

<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>

transitions.js 需要首先包含在内！

Answer 2

首先将您的模态弹出框放在body标签之外。在该注释之后或从bootstrap.css中的模态背景类中删除显示属性，就像我在下面所做的那样

.

modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  /*display:none;*/

now write some jquery as i have mentioned below:

$("#Yourid").click(function() {

  $('.modal-backdrop fade in').attr("display", "block");
});