Twitter的引导:模式弹出不会褪色(Twitter Bootstrap: Modal popup

2019-07-29 05:42发布

我使用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

更新我已经意识到这个问题是,它是嵌套在.tabbable的div也使用.fade我已经更新上面的HTML中。

Answer 1:

你可能忘了,包括了动画的JavaScript

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

在transitions.js需要得到首次列入!



Answer 2:

首先把你的模式弹出体外tag.After该评论或类模式,背景中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"); }); 



文章来源: Twitter Bootstrap: Modal popup won't fade