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