Twitter Bootstrap: Modal popup won't fade

14,440

you probably forgot to include the javascript for the animations

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

the transitions.js needs to get included first!

14,440

hofnarwillie

Updated on June 04, 2022

Comments

hofnarwillie almost 2 years

I have the following markup using a twitter bootstrap modal plugin:

    <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>

This brings up a modal, but doesn't fade it as in the demo on this page: http://twitter.github.com/bootstrap/javascript.html#modals

UPDATE I have realised that the issue is that it is nested within a .tabbable div which also uses .fade I've updated the html above.

hofnarwillie almost 12 years

You were right. I downloaded it from github, so didn't include the plugin, but now I have included it and it still doesn't fade.
HaNdTriX almost 12 years

just testet your html and it works fine. Are you shure that you downloaded the correct bootstrap-transition.js ?
hofnarwillie almost 12 years

On this page: twitter.github.com/bootstrap/download.html I select all the plugins and then click the giant blue button at the bottom.
hofnarwillie almost 12 years

I have now removed the relevant html and it works fine. seems to be a problem when it is nested inside a .tabbable element which also fades. Any ideas on how to overcome? Please see the updated html above
Misery almost 12 years

Just a comment that if you are selectively including various css components from bootstrap, you must have the .fade style in stylesheet, too.
HaNdTriX over 11 years

take a look at twitter.github.com/bootstrap/customize.html - Search for transitions
hofnarwillie about 8 years

1. You should not place any HTML code outside the body tag.
hofnarwillie about 8 years

2. Don't modify source bootstrap css files.
hofnarwillie about 8 years

3. The javascript is not necessary.
hofnarwillie about 8 years

4. The solution doesn't address the opening post at all (not sure what it is supposed to achieve)
dn_pdih almost 8 years

i was facing issue and didn't found out the solution,so using my knowledge applied this logic and this solution solution worked like charm.There is no rule saying that you cant modified bootstrap css,mostly people modified or overwrite bootstrap css using custom css.
hofnarwillie almost 8 years

You are right, there's no rule that says you shouldn't edit third party libraries, but it is a very bad practice to do so. It means that you will never be able to upgrade to a later version of bootstrap without overwriting your customizations. Also, your modifications could negatively affect other Bootstrap functionality since it hasn't gone through Bootstrap's exhaustive internal test suites.