rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

allow backdrop option to accept "static" option

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/js/application.js
View File

@ -30,7 +30,7 @@ $(document).ready(function(){
$(".copy-code").focus(function () { $(".copy-code").focus(function () {
var el = this; var el = this;
// push select to event loop for chrome :{o // push select to event loop for chrome :{o
setTimeout(function () { $(el).select(); }, 1); setTimeout(function () { $(el).select(); }, 0);
}); });

18
docs/javascript.html
View File

@ -101,15 +101,9 @@
<tbody> <tbody>
<tr> <tr>
<td>backdrop</td> <td>backdrop</td>
<td>boolean</td> <td>boolean, string</td>
<td>false</td> <td>false</td>
<td>Includes a modal-backdrop element</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>backdropClickHides</td>
<td>boolean</td>
<td>true</td>
<td>A click on the modal-backdrop element hides the modal</td>
</tr> </tr>
<tr> <tr>
<td>keyboard</td> <td>keyboard</td>
@ -128,7 +122,7 @@
<h3>Markup</h3> <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> <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"> <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> </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> <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> <h3>Methods</h3>
@ -464,7 +458,7 @@ $('#my-modal').bind('hidden', function () {
</tr> </tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td>string | function</td> <td>string, function</td>
<td>'title'</td> <td>'title'</td>
<td>attribute or method for retrieving title text</td> <td>attribute or method for retrieving title text</td>
</tr> </tr>
@ -581,13 +575,13 @@ $('#my-modal').bind('hidden', function () {
</tr> </tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td>string | function</td> <td>string, function</td>
<td>'title'</td> <td>'title'</td>
<td>attribute or method for retrieving title text</td> <td>attribute or method for retrieving title text</td>
</tr> </tr>
<tr> <tr>
<td>content</td> <td>content</td>
<td>string | function</td> <td>string, function</td>
<td>'data-content'</td> <td>'data-content'</td>
<td>attribute or method for retrieving content text</td> <td>attribute or method for retrieving content text</td>
</tr> </tr>

13
js/bootstrap-modal.js vendored
View File

@ -89,7 +89,7 @@
that.$element that.$element
.addClass('in') .addClass('in')
.trigger('shown') .trigger('shown')
}, 1) }, 0)
}) })
return this return this
@ -133,17 +133,19 @@
, animate = this.$element.hasClass('fade') ? 'fade' : '' , animate = this.$element.hasClass('fade') ? 'fade' : ''
if ( this.isShown && this.settings.backdrop ) { if ( this.isShown && this.settings.backdrop ) {
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
if ( this.settings.backdropClickHides ) { .appendTo(document.body)
this.$backdrop.click($.proxy(this.hide, this))
if ( this.settings.backdrop != 'static' ) {
this.$backdrop.click($.proxy(this.hide, this))
} }
this.$backdrop.appendTo(document.body)
setTimeout(function () { setTimeout(function () {
that.$backdrop && that.$backdrop.addClass('in') that.$backdrop && that.$backdrop.addClass('in')
$.support.transition && that.$backdrop.hasClass('fade') ? $.support.transition && that.$backdrop.hasClass('fade') ?
that.$backdrop.one(transitionEnd, callback) : that.$backdrop.one(transitionEnd, callback) :
callback() callback()
}) }, 0)
} else if ( !this.isShown && this.$backdrop ) { } else if ( !this.isShown && this.$backdrop ) {
this.$backdrop.removeClass('in') this.$backdrop.removeClass('in')
@ -210,7 +212,6 @@
$.fn.modal.defaults = { $.fn.modal.defaults = {
backdrop: false backdrop: false
, backdropClickHides: true
, keyboard: false , keyboard: false
, show: true , show: true
} }

2
js/tests/unit/bootstrap-modal.js vendored
View File

@ -137,7 +137,7 @@ $(function () {
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop:true, backdropClickHides:false}) .modal({backdrop: 'static'})
.modal("show") .modal("show")
.bind("shown", function () { .bind("shown", function () {
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')