Twitter Bootstrap: Modal popup won't fade

Question

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.

HaNdTriX · Accepted Answer · 2012-05-02T08:48:48.490

11

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!

edited May 02 '12 at 08:48

answered May 01 '12 at 23:54

HaNdTriX

28,732
11
78
85

1

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. – hofnarwillie May 02 '12 at 08:36
just testet your html and it works fine. Are you shure that you downloaded the correct bootstrap-transition.js ? – HaNdTriX May 02 '12 at 08:54
On this page: http://twitter.github.com/bootstrap/download.html I select all the plugins and then click the giant blue button at the bottom. – hofnarwillie May 02 '12 at 09:02
1

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 – hofnarwillie May 02 '12 at 09:07
Just a comment that if you are selectively including various css components from bootstrap, you must have the .fade style in stylesheet, too. – stereoscott May 31 '12 at 23:19
take a look at http://twitter.github.com/bootstrap/customize.html - Search for transitions – HaNdTriX Oct 16 '12 at 09:27

score -2 · Answer 2 · answered Mar 23 '16 at 12:06

-2

First place your modal pop outside the body tag.After that comment or remove display property from class modal-backdrop in bootstrap.css as i have done below

.

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");
});

answered Mar 23 '16 at 12:06

dn_pdih

11
3

2

1. You should not place any HTML code outside the body tag. – hofnarwillie Mar 31 '16 at 20:09
2

2. Don't modify source bootstrap css files. – hofnarwillie Mar 31 '16 at 20:09
2

3. The javascript is not necessary. – hofnarwillie Mar 31 '16 at 20:11
2

4. The solution doesn't address the opening post at all (not sure what it is supposed to achieve) – hofnarwillie Mar 31 '16 at 20:12
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. – dn_pdih May 16 '16 at 09:21
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. – hofnarwillie May 16 '16 at 23:44

Twitter Bootstrap: Modal popup won't fade

2 Answers2

Linked