<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body">
...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Remove animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
{% highlight html %}
...
{% endhighlight %}
Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Via data attributes
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
{% highlight html %}
Launch modal
{% endhighlight %}
Via JavaScript
Call a modal with id myModal with a single line of JavaScript:
{% highlight js %}$('#myModal').modal(options){% endhighlight %}
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name |
type |
default |
description |
| backdrop |
boolean or the string 'static' |
true |
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard |
boolean |
true |
Closes the modal when escape key is pressed |
| show |
boolean |
true |
Shows the modal when initialized. |
Methods
.modal(options)
Activates your content as a modal. Accepts an optional options object.
{% highlight js %}
$('#myModal').modal({
keyboard: false
})
{% endhighlight %}
.modal('toggle')
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
{% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
.modal('show')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
{% highlight js %}$('#myModal').modal('show'){% endhighlight %}
.modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
{% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
Events
Bootstrap's modal class exposes a few events for hooking into modal functionality.
| Event Type |
Description |
| show.bs.modal |
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| shown.bs.modal |
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| hide.bs.modal |
This event is fired immediately when the hide instance method has been called. |
| hidden.bs.modal |
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
| loaded.bs.modal |
This event is fired when the modal has loaded content using the remote option. |
{% highlight js %}
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
{% endhighlight %}
