force reflow instead of relying on eventloop (firefox)

listen to window for escape press

docs/javascript.html

@@ -12,7 +12,7 @@
     <![endif]-->
 
     <!-- Le javascript -->
-    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
     <script src="../js/bootstrap-modal.js"></script>

js/bootstrap-modal.js

@@ -85,11 +85,13 @@
             .appendTo(document.body)
             .show()
 
-          setTimeout(function () {
-            that.$element
-              .addClass('in')
-              .trigger('shown')
-          }, 0)
+          if ($.support.transition && that.$element.hasClass('fade')) {
+            that.$backdrop[0].offsetWidth // force reflow
+          }
+
+          that.$element
+            .addClass('in')
+            .trigger('shown')
         })
 
         return this
@@ -132,6 +134,8 @@
     var that = this
       , animate = this.$element.hasClass('fade') ? 'fade' : ''
     if ( this.isShown && this.settings.backdrop ) {
+      var doAnimate = $.support.transition && animate
+
       this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
         .appendTo(document.body)
 
@@ -139,12 +143,15 @@
         this.$backdrop.click($.proxy(this.hide, this))
       }
 
-      setTimeout(function () {
-        that.$backdrop && that.$backdrop.addClass('in')
-        $.support.transition && that.$backdrop.hasClass('fade') ?
-          that.$backdrop.one(transitionEnd, callback) :
-          callback()
-      }, 0)
+      if ( doAnimate ) {
+        that.$backdrop[0].offsetWidth // force reflow
+      }
+
+      that.$backdrop && that.$backdrop.addClass('in')
+
+      doAnimate ?
+        that.$backdrop.one(transitionEnd, callback) :
+        callback()
 
     } else if ( !this.isShown && this.$backdrop ) {
       this.$backdrop.removeClass('in')
@@ -165,13 +172,13 @@
   function escape() {
     var that = this
     if ( this.isShown && this.settings.keyboard ) {
-      $('body').bind('keyup.modal', function ( e ) {
+      $(window).bind('keyup.modal', function ( e ) {
         if ( e.which == 27 ) {
           that.hide()
         }
       })
     } else if ( !this.isShown ) {
-      $('body').unbind('keyup.modal')
+      $(window).unbind('keyup.modal')
     }
   }
 

js/tests/unit/bootstrap-modal.js

 $(function () {
 
-    module("bootstrap-modal")
+  module("bootstrap-modal")
 
-      test("should be defined on jquery object", function () {
-        var div = $("<div id='modal-test'></div>")
-        ok(div.modal, 'modal method is defined')
-      })
+    test("should be defined on jquery object", function () {
+      var div = $("<div id='modal-test'></div>")
+      ok(div.modal, 'modal method is defined')
+    })
 
-      test("should return element", function () {
-        var div = $("<div id='modal-test'></div>")
-        ok(div.modal() == div, 'document.body returned')
-      })
+    test("should return element", function () {
+      var div = $("<div id='modal-test'></div>")
+      ok(div.modal() == div, 'div element returned')
+    })
 
-      test("should expose defaults var for settings", function () {
-        ok($.fn.modal.defaults, 'default object exposed')
-      })
+    test("should expose defaults var for settings", function () {
+      ok($.fn.modal.defaults, 'default object exposed')
+    })
 
-      test("should insert into dom when show method is called", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .modal()
-          .modal("show")
-          .bind("shown", function () {
-            ok($('#modal-test').length, 'modal insterted into dom')
-            start()
-            div.remove()
-          })
-      })
+    test("should insert into dom when show method is called", function () {
+      stop()
+      $.support.transition = false
+      var div = $("<div id='modal-test'></div>")
+      div
+        .modal()
+        .bind("shown", function () {
+          ok($('#modal-test').length, 'modal insterted into dom')
+          start()
+          div.remove()
+        })
+        .modal("show")
+    })
 
-      test("should hide modal when hide is called", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .modal()
-          .bind("shown", function () {
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            ok($('#modal-test').length, 'modal insterted into dom')
-            div.modal("hide")
-          })
-          .bind("hidden", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            start()
-            div.remove()
-          })
-          .modal("show")
-      })
+    test("should hide modal when hide is called", function () {
+       stop()
+       $.support.transition = false
+       var div = $("<div id='modal-test'></div>")
+       div
+         .modal()
+         .bind("shown", function () {
+           ok($('#modal-test').is(":visible"), 'modal visible')
+           ok($('#modal-test').length, 'modal insterted into dom')
+           div.modal("hide")
+         })
+         .bind("hidden", function() {
+           ok(!$('#modal-test').is(":visible"), 'modal hidden')
+           start()
+           div.remove()
+         })
+         .modal("show")
+     })
 
-      test("should toggle when toggle is called", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .modal()
-          .bind("shown", function () {
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            ok($('#modal-test').length, 'modal insterted into dom')
-            div.modal("toggle")
-          })
-          .bind("hidden", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            start()
-            div.remove()
-          })
-          .modal("toggle")
-      })
+     test("should toggle when toggle is called", function () {
+       stop()
+       $.support.transition = false
+       var div = $("<div id='modal-test'></div>")
+       div
+         .modal()
+         .bind("shown", function () {
+           ok($('#modal-test').is(":visible"), 'modal visible')
+           ok($('#modal-test').length, 'modal insterted into dom')
+           div.modal("toggle")
+         })
+         .bind("hidden", function() {
+           ok(!$('#modal-test').is(":visible"), 'modal hidden')
+           start()
+           div.remove()
+         })
+         .modal("toggle")
+     })
 
-      test("should remove from dom when click .close", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'><span class='close'></span></div>")
-        div
-          .modal()
-          .bind("shown", function () {
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            ok($('#modal-test').length, 'modal insterted into dom')
-            div.find('.close').click()
-          })
-          .bind("hidden", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            start()
-            div.remove()
-          })
-          .modal("toggle")
-      })
+     test("should remove from dom when click .close", function () {
+       stop()
+       $.support.transition = false
+       var div = $("<div id='modal-test'><span class='close'></span></div>")
+       div
+         .modal()
+         .bind("shown", function () {
+           ok($('#modal-test').is(":visible"), 'modal visible')
+           ok($('#modal-test').length, 'modal insterted into dom')
+           div.find('.close').click()
+         })
+         .bind("hidden", function() {
+           ok(!$('#modal-test').is(":visible"), 'modal hidden')
+           start()
+           div.remove()
+         })
+         .modal("toggle")
+     })
 
-      test("should add backdrop when desired", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .modal({backdrop:true})
-          .modal("show")
-          .bind("shown", function () {
-            equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
-            start()
-            div.remove()
-            $('.modal-backdrop').remove()
-          })
-      })
+     test("should add backdrop when desired", function () {
+       stop()
+       $.support.transition = false
+       var div = $("<div id='modal-test'></div>")
+       div
+         .modal({ backdrop:true })
+         .bind("shown", function () {
+           equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
+           start()
+           div.remove()
+           $('.modal-backdrop').remove()
+         })
+        .modal("show")
+     })
 
-      test("should not add backdrop when not desired", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .modal({backdrop:false})
-          .modal("show")
-          .bind("shown", function () {
-            equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
-            start()
-            div.remove()
-          })
-      })
+     test("should not add backdrop when not desired", function () {
+       stop()
+       $.support.transition = false
+       var div = $("<div id='modal-test'></div>")
+       div
+         .modal({backdrop:false})
+         .bind("shown", function () {
+           equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
+           start()
+           div.remove()
+         })
+         .modal("show")
+     })
 
-      test("should close backdrop when clicked", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .modal({backdrop:true})
-          .modal("show")
-          .bind("shown", function () {
-            equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
-            $('.modal-backdrop').click()
-            equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
-            start()
-            div.remove()
-          })
-      })
+     test("should close backdrop when clicked", function () {
+       stop()
+       $.support.transition = false
+       var div = $("<div id='modal-test'></div>")
+       div
+         .modal({backdrop:true})
+         .bind("shown", function () {
+           equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
+           $('.modal-backdrop').click()
+           equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
+           start()
+           div.remove()
+         })
+         .modal("show")
+     })
 
-      test("should not close backdrop when click disabled", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .modal({backdrop: 'static'})
-          .modal("show")
-          .bind("shown", function () {
-            equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
-            $('.modal-backdrop').click()
-            equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
-            start()
-            div.remove()
-            $('.modal-backdrop').remove()
-          })
-      })
+     test("should not close backdrop when click disabled", function () {
+       stop()
+       $.support.transition = false
+       var div = $("<div id='modal-test'></div>")
+       div
+         .modal({backdrop: 'static'})
+         .bind("shown", function () {
+           equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
+           $('.modal-backdrop').click()
+           equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
+           start()
+           div.remove()
+           $('.modal-backdrop').remove()
+         })
+         .modal("show")
+     })
 })