Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Static example
A rendered modal with header, body, and set of actions in the footer.
Modal header
One fine body…
- <div class=«modal hide fade»>
- <div class=«modal-header»>
- <button type=«button» class=«close» data-dismiss=«modal» aria-hidden=«true»>×</button>
- <h3>Modal header</h3>
- </div>
- <div class=«modal-body»>
- <p>One fine body…</p>
- </div>
- <div class=«modal-footer»>
- <a href=«#» class=«btn»>Close</a>
- <a href=«#» class=«btn btn-primary»>Save changes</a>
- </div>
- </div>
Live demo
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
- <– Button to trigger modal –>
- <a href=«#myModal» role=«button» class=«btn» data-toggle=«modal»>Launch demo modal</a>
- <– Modal –>
- <div class=«modal» id=«myModal» tabindex=«-1» role=«dialog» aria-labelledby=«myModalLabel» aria-hidden=«true»>
- <div class=«modal-header»>
- <button type=«button» class=«close» data-dismiss=«modal» aria-hidden=«true»>×</button>
- <h3 id=«myModalLabel»>Modal header</h3>
- </div>
- <div class=«modal-body»>
- <p>One fine body…</p>
- </div>
- <div class=«modal-footer»>
- <button class=«btn» data-dismiss=«modal» aria-hidden=«true»>Close</button>
- <button class=«btn btn-primary»>Save changes</button>
- </div>
- </div>
Usage
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.
- <button type=«button» data-toggle=«modal» data-target=«#myModal»>Launch modal</button>
Via JavaScript
Call a modal with id myModal
with a single line of JavaScript:
- $(‘#myModal’).modal(options)
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 | 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. |
remote | path | false |
If a remote url is provided, content will be loaded via jQuery’s
|
Methods
.modal(options)
Activates your content as a modal. Accepts an optional options object
.
- $(‘#myModal’).modal({
- keyboard: false
- })
.modal(‘toggle’)
Manually toggles a modal.
- $(‘#myModal’).modal(‘toggle’)
.modal(‘show’)
Manually opens a modal.
- $(‘#myModal’).modal(‘show’)
.modal(‘hide’)
Manually hides a modal.
- $(‘#myModal’).modal(‘hide’)
Events
Bootstrap’s modal class exposes a few events for hooking into modal functionality.
Event | Description |
---|---|
show | This event fires immediately when the show instance method is called. |
shown | This event is fired when the modal has been made visible to the user (will wait for css transitions to complete). |
hide | This event is fired immediately when the hide instance method has been called. |
hidden | This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete). |
- $(‘#myModal’).on(‘hidden’, function () {
- // do something…
- })