Twitter bootstrap: modal fade

Question

I have a problem with the twitter bootstrap modal...

It works fine when I don't have the .fade class on my element. As soon as I add it, the modal does not show up.

I tracked down the problem to this line, I think:

doAnimate ?
  this.$backdrop.one(transitionEnd, callback) :
  callback()

doAnimate is webkitTransitionEnd , it looks fine. But I think transitionEnd is never fired, because I try to log something in the callback, and it never gets logged.

Any ideas?

---

EDIT: some code

The link:

<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a>

The modal (works without the fade class, doesn't when I add it)

<div id="event-modal" class="modal hide fade"></div>

The css:

.modal.fade {
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -ms-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
    top: -25%;
}

Am I missing something?

Answer 1

Despite it being accepted, the info in this answer was incorrect, therefore I have removed the original response to prevent confusion. Here's a jsFiddle of a working demo with fade http://jsfiddle.net/sfWBT/880/

Edited to provide updated link as previous jsFiddle wasn't working, and I can no longer add jsFiddle without code. So here's the code as well:

html:

<div id="event-modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" href="#">x</a>
        <h3>Modal Heading</h3>
      </div>
      <div class="modal-body">
        <p>Some information</p>
      </div>
      <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
      </div>
    </div>
  </div>
</div>

js:

$(function() {
  $('#event-modal').modal({
    backdrop: true
  });
});

Answer 2

I had the same problem. I was trying to use bootstrap in an existing project and since many of the classnames clashed with my own class names, I had recompiled bootstrap.css with a .tbs namespace. In the modal window plugin, the backdrop element is added to document.body. Since the modal backdrop was not in my .tbs namespace the css fade selector was not applied. Thus the transition never occurred and hence the callback function was never fired. I fixed this by modifying

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo(document.body)

to

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo($('.tbs')[0])

Answer 3

I had the same issue as I only wanted to use parts of the twitter bootstrap framework.

It is CSS styles that are missing in your case Robin. For the modals to work correctly you need to include the rules from 'component-animations.less' file.

this will allow the modals to work with the '.fade' class added to them.

Answer 4

try the following jquery in one of your js files, you will need a 'close' classed element inside you modal/alert

for alert boxes

$(".alert .close").click( function() {
     $(this).parent().addClass("fade");
});

or for modals (may differ depending on your element nesting)

$(".modal .modal-header .close").click( function() {
   $(this).parent().parent().addClass("fade");
});

Answer 5

The issue for me was same as @sleepysamurai, that I had namespaced my bootstrap file and this breaks the modals. I fixed it by changing the .css though, rather than the .js, since it was already "customized". Specifically (for Bootstrap 2.3.2, namespaced into bootstrap-container ):

• Search/replace all .bootstrap-container .modal- and replace with .modal- .
• Search/replace all .bootstrap-container .fade and replace with .fade .

In other words, un-namespacing the modal and fade rules fixed the issue.

Answer 6

You must use the plugin that brings the modal behavior, it's a jQuery plugin from Twitter. For reference to that script: http://twitter.github.com/bootstrap/javascript.html#modal

Also make sure you're using the right piece of HTML (it's not shown in the page). From that link's source code:

<div class="modal hide fade" id="modal-from-dom">
    <div class="modal-header">
        <a class="close" href="#">×</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>
</div>

Note that the "in" class that @ChristianVarga suggests is added automatically by the modal plugin. You must only initialize the plugin, as pointed in the documentation.