Adding flag to prevent backdrop click hiding modal

docs/javascript.html

@@ -105,6 +105,12 @@
                <td>false</td>
                <td>Includes a modal-backdrop element</td>
              </tr>
+             <tr>
+               <td>backdropClickHides</td>
+               <td>boolean</td>
+               <td>true</td>
+               <td>A click on the modal-backdrop element hides the modal</td>
+             </tr>
              <tr>
                <td>keyboard</td>
                <td>boolean</td>

js/bootstrap-modal.js

@@ -133,8 +133,10 @@
       , animate = this.$element.hasClass('fade') ? 'fade' : ''
     if ( this.isShown && this.settings.backdrop ) {
       this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
-        .click($.proxy(this.hide, this))
+      if ( this.settings.backdropClickHides ) {
-        .appendTo(document.body)
+          this.$backdrop.click($.proxy(this.hide, this))
+      }
+      this.$backdrop.appendTo(document.body)
 
       setTimeout(function () {
         that.$backdrop && that.$backdrop.addClass('in')
@@ -208,6 +210,7 @@
 
   $.fn.modal.defaults = {
     backdrop: false
+  , backdropClickHides: true
   , keyboard: false
   , show: true
   }

js/tests/unit/bootstrap-modal.js

@@ -86,4 +86,66 @@ $(function () {
           })
           .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 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 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 not close backdrop when click disabled", function () {
+        stop()
+        $.support.transition = false
+        var div = $("<div id='modal-test'></div>")
+        div
+          .modal({backdrop:true, backdropClickHides:false})
+          .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()
+          })
+      })
 })