diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 16a20e068e235f8fc7bfa94e9f8403687b68418a..5beba46e1fa45dc417bcf212249cb8602b07dc0d 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 e0d85f25a7dacc09efd0b5c80286b762f4297e2f..ca4f941a15ac7cb4bd9260f714cf2c96603c351e 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"> -<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a> +<a class="btn" data-controls-modal="my-modal" data-backdrop="static" >Launch Modal</a> </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 98e5d430153cb46407384258c13d29ed0f9e2341..d3e293ca838c8248be907450b1e71edee555a633 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 69e720f0f14b1b47bc06efbfdee83d6e73acdede..be6babeef7432f166cbf6130a66c323187fc480a 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')