allow backdrop option to accept "static" option

4 files changed, 15 insertions, 20 deletions

diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 16a20e068..5beba46e1 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -30,7 +30,7 @@ $(document).ready(function(){
   $(".copy-code").focus(function () {
     var el = this;
     // push select to event loop for chrome :{o
-    setTimeout(function () { $(el).select(); }, 1);
+    setTimeout(function () { $(el).select(); }, 0);
   });
 
 
diff --git a/docs/javascript.html b/docs/javascript.html
index e0d85f25a..ca4f941a1 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -101,15 +101,9 @@
             <tbody>
              <tr>
                <td>backdrop</td>
-               <td>boolean</td>
+               <td>boolean, string</td>
                <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>
+               <td>Includes a modal-backdrop element. Set backdrop to <code>"static"</code> if you do not want the modal closed when the backdrop is clicked.</td>
              </tr>
              <tr>
                <td>keyboard</td>
@@ -128,7 +122,7 @@
           <h3>Markup</h3>
           <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p>
 <pre class="prettyprint linenums">
-&lt;a class="btn" data-controls-modal="my-modal" data-backdrop="true" &gt;Launch Modal&lt;/a&gt;
+&lt;a class="btn" data-controls-modal="my-modal" data-backdrop="static" &gt;Launch Modal&lt;/a&gt;
 </pre>
           <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
           <h3>Methods</h3>
@@ -464,7 +458,7 @@ $('#my-modal').bind('hidden', function () {
              </tr>
              <tr>
                <td>title</td>
-               <td>string | function</td>
+               <td>string, function</td>
                <td>'title'</td>
                <td>attribute or method for retrieving title text</td>
              </tr>
@@ -581,13 +575,13 @@ $('#my-modal').bind('hidden', function () {
              </tr>
              <tr>
                <td>title</td>
-               <td>string | function</td>
+               <td>string, function</td>
                <td>'title'</td>
                <td>attribute or method for retrieving title text</td>
              </tr>
              <tr>
                <td>content</td>
-               <td>string | function</td>
+               <td>string, function</td>
                <td>'data-content'</td>
                <td>attribute or method for retrieving content text</td>
              </tr>
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 98e5d4301..d3e293ca8 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -89,7 +89,7 @@
             that.$element
               .addClass('in')
               .trigger('shown')
-          }, 1)
+          }, 0)
         })
 
         return this
@@ -133,17 +133,19 @@
       , animate = this.$element.hasClass('fade') ? 'fade' : ''
     if ( this.isShown && this.settings.backdrop ) {
       this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
-      if ( this.settings.backdropClickHides ) {
-          this.$backdrop.click($.proxy(this.hide, this))
+        .appendTo(document.body)
+
+      if ( this.settings.backdrop != 'static' ) {
+        this.$backdrop.click($.proxy(this.hide, this))
       }
-      this.$backdrop.appendTo(document.body)
 
       setTimeout(function () {
         that.$backdrop && that.$backdrop.addClass('in')
         $.support.transition && that.$backdrop.hasClass('fade') ?
           that.$backdrop.one(transitionEnd, callback) :
           callback()
-      })
+      }, 0)
+
     } else if ( !this.isShown && this.$backdrop ) {
       this.$backdrop.removeClass('in')
 
@@ -210,7 +212,6 @@
 
   $.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 69e720f0f..be6babeef 100644
--- a/js/tests/unit/bootstrap-modal.js
+++ b/js/tests/unit/bootstrap-modal.js
@@ -137,7 +137,7 @@ $(function () {
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
         div
-          .modal({backdrop:true, backdropClickHides:false})
+          .modal({backdrop: 'static'})
           .modal("show")
           .bind("shown", function () {
             equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')