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 () {
+          if ($.support.transition && that.$element.hasClass('fade')) {
+            that.$backdrop[0].offsetWidth // force reflow
+          }
+
           that.$element
             .addClass('in')
             .trigger('shown')
-          }, 0)
         })
 
         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 () {
+      if ( doAnimate ) {
+        that.$backdrop[0].offsetWidth // force reflow
+      }
+
       that.$backdrop && that.$backdrop.addClass('in')
-        $.support.transition && that.$backdrop.hasClass('fade') ?
+
+      doAnimate ?
         that.$backdrop.one(transitionEnd, callback) :
         callback()
-      }, 0)
 
     } 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

@@ -9,7 +9,7 @@ $(function () {
 
     test("should return element", function () {
       var div = $("<div id='modal-test'></div>")
-        ok(div.modal() == div, 'document.body returned')
+      ok(div.modal() == div, 'div element returned')
     })
 
     test("should expose defaults var for settings", function () {
@@ -22,12 +22,12 @@ $(function () {
       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()
         })
+        .modal("show")
     })
 
     test("should hide modal when hide is called", function () {
@@ -92,14 +92,14 @@ $(function () {
        $.support.transition = false
        var div = $("<div id='modal-test'></div>")
        div
-          .modal({backdrop:true})
+         .modal({ backdrop:true })
-          .modal("show")
          .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 () {
@@ -108,12 +108,12 @@ $(function () {
        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()
          })
+         .modal("show")
      })
 
      test("should close backdrop when clicked", function () {
@@ -122,7 +122,6 @@ $(function () {
        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()
@@ -130,6 +129,7 @@ $(function () {
            start()
            div.remove()
          })
+         .modal("show")
      })
 
      test("should not close backdrop when click disabled", function () {
@@ -138,7 +138,6 @@ $(function () {
        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()
@@ -147,5 +146,6 @@ $(function () {
            div.remove()
            $('.modal-backdrop').remove()
          })
+         .modal("show")
      })
 })