diff --git a/docs/javascript.html b/docs/javascript.html
index f001ad8083..e0d85f25a7 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -105,6 +105,12 @@
false |
Includes a modal-backdrop element |
+
+ backdropClickHides |
+ boolean |
+ true |
+ A click on the modal-backdrop element hides the modal |
+
keyboard |
boolean |
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index da67060731..98e5d43015 100644
--- 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 = $('')
- .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 4bbb3313cc..69e720f0f1 100644
--- 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
+ .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
+ .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
+ .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
+ .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()
+ })
+ })
+})