Twitter bootstrap: modal fade

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

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