fix #7660

js/modal.js

@@ -160,11 +160,12 @@
       this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
         .appendTo(document.body)
 
-      this.$backdrop.click(
-        this.options.backdrop == 'static' ?
-          $.proxy(this.$element[0].focus, this.$element[0])
-        : $.proxy(this.hide, this)
-      )
+      this.$element.on('click', $.proxy(function (e) {
+        if (e.target !== e.currentTarget) return
+        this.options.backdrop == 'static'
+          ? this.$element[0].focus.call(this.$element[0])
+          : this.hide.call(this)
+      }, this))
 
       if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
 

js/tests/unit/modal.js

@@ -134,4 +134,23 @@ $(function () {
           })
           .modal("show")
       })
+
+      test("should close modal when clicking outside of modal-content", function () {
+        stop()
+        $.support.transition = false
+        var div = $("<div id='modal-test'><div class='contents'></div></div>")
+        div
+          .bind("shown.bs.modal", function () {
+            ok($('#modal-test').length, 'modal insterted into dom')
+            $('.contents').click()
+            ok($('#modal-test').is(":visible"), 'modal visible')
+            $('#modal-test').click()
+          })
+          .bind("hidden.bs.modal", function() {
+            ok(!$('#modal-test').is(":visible"), 'modal hidden')
+            div.remove()
+            start()
+          })
+          .modal("show")
+      })
 })