Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
A rendered modal with header, body, and set of actions in the footer.
One fine body…
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
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.
Call a modal with id myModal
with a single line of JavaScript:
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
|
Activates your content as a modal. Accepts an optional options object
.
Manually toggles a modal.
Manually opens a modal.
Manually hides a modal.
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). |