$(".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);
});
<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>
<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>
</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>
<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>
that.$element
.addClass('in')
.trigger('shown')
- }, 1)
+ }, 0)
})
return this
, 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')
$.fn.modal.defaults = {
backdrop: false
- , backdropClickHides: true
, keyboard: false
, show: true
}
$.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')