<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<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>
Remove animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
{% highlight html %}
...
{% endhighlight %}
Using the grid system
To take advantage of the Bootstrap grid system within a modal, just nest .container-fluid within the .modal-body` and then use the normal grid system classes within this container.
{% example html %}
×
Modal title
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-2 .col-md-offset-4
.col-md-6 .col-md-offset-3
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
Close
Save changes
Launch demo modal
{% endexample %}
Varying modal content based on trigger button
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget.
{% example html %}
Open modal for @mdo
Open modal for @fat
Open modal for @getbootstrap
×
Close
New message
Close
Send message
{% endexample %}
{% highlight js %}
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
{% endhighlight %}
Modals with dynamic heights
If the height of a modal changes while it is open, you should call $('#myModal').data('bs.modal').handleUpdate() to readjust the modal's position in case a scrollbar appears.
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. All modal events are fired at the modal itself (i.e. at the <div class="modal">).
| 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 %}