0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00

allow backdrop option to accept "static" option

This commit is contained in:
Jacob Thornton 2011-09-17 14:20:51 -07:00
parent 2cb233319d
commit 7b614cfa01
4 changed files with 15 additions and 20 deletions

View File

@ -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);
});

View File

@ -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>

13
js/bootstrap-modal.js vendored
View File

@ -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
}

View File

@ -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')