rework the transitions for the modal a bit

js/bootstrap-modal.js

@@ -59,16 +59,17 @@
       this.isShown = true
 
       _.escape.call(this)
-      _.backdrop.call(this)
+      _.backdrop.call(this, function () {
 
-      this.$element
-        .appendTo(document.body)
-        .show()
+        that.$element
+          .appendTo(document.body)
+          .show()
 
-      setTimeout(function () {
-        that.$element.addClass('in').trigger('modal:shown')
-        that.$backdrop && that.$backdrop.addClass('in')
-      }, 1)
+        setTimeout(function () {
+          that.$element.addClass('in').trigger('modal:shown')
+        }, 1)
+
+      })
 
       return this
     }
@@ -81,19 +82,19 @@
       this.isShown = false
 
       _.escape.call(this)
-      _.backdrop.call(this)
 
       this.$element.removeClass('in')
 
       function removeElement () {
+        _.backdrop.call(that)
+
         that.$element
-          .unbind(transitionEnd)
           .detach()
           .trigger('modal:hidden')
       }
 
       $.support.transition && this.$element.hasClass('fade') ?
-        this.$element.bind(transitionEnd, removeElement) :
+        this.$element.one(transitionEnd, removeElement) :
         removeElement()
 
       return this
@@ -107,13 +108,21 @@
 
   var _ = {
 
-    backdrop: function () {
+    backdrop: function ( callback ) {
       var that = this
         , animate = this.$element.hasClass('fade') ? 'fade' : ''
       if ( this.isShown && this.settings.backdrop ) {
         this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
           .click($.proxy(this.hide, this))
           .appendTo(document.body)
+
+        setTimeout(function () {
+          that.$backdrop && that.$backdrop.addClass('in')
+
+          $.support.transition && that.$backdrop.hasClass('fade')?
+            that.$backdrop.one(transitionEnd, callback) :
+            callback()
+        })
       } else if ( !this.isShown && this.$backdrop ) {
         this.$backdrop.removeClass('in')
 
@@ -123,7 +132,7 @@
         }
 
         $.support.transition && this.$element.hasClass('fade')?
-          this.$backdrop.bind(transitionEnd, removeElement) :
+          this.$backdrop.one(transitionEnd, removeElement) :
           removeElement()
       }
     }