Adding flag to prevent backdrop click hiding modal

diff --git a/docs/javascript.html b/docs/javascript.html
index f001ad80834a2ef3de5030c7a9bf015d28f70a82..e0d85f25a7dacc09efd0b5c80286b762f4297e2f 100644 (file)
--- a/docs/javascript.html
+++ b/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>

diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index da67060731c80cc8e624d5e0bb58ffd0fa0fdfdb..98e5d430153cb46407384258c13d29ed0f9e2341 100644 (file)
--- a/js/bootstrap-modal.js
+++ b/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))
-        .appendTo(document.body)
+      if ( this.settings.backdropClickHides ) {
+          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
   }

diff --git a/js/tests/unit/bootstrap-modal.js b/js/tests/unit/bootstrap-modal.js
index 4bbb3313cca17c2fc58ca0c51ad705d0283cc03c..69e720f0f14b1b47bc06efbfdee83d6e73acdede 100644 (file)
--- a/js/tests/unit/bootstrap-modal.js
+++ b/js/tests/unit/bootstrap-modal.js
@@ -86,4 +86,66 @@ $(function () {
           })
           .modal("toggle")
       })
-})
\ No newline at end of file
+
+      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()
+          })
+      })
+})