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…

Close Save changes

  1. <div class=«modal hide fade»>
  2.  <div class=«modal-header»>
  3.  <button type=«button» class=«close» data-dismiss=«modal» aria-hidden=«true»>&times;</button>
  4.  <h3>Modal header</h3>
  5.  </div>
  6.  <div class=«modal-body»>
  7.  <p>One fine body…</p>
  8.  </div>
  9.  <div class=«modal-footer»>
  10.  <a href=«#» class=«btn»>Close</a>
  11.  <a href=«#» class=«btn btn-primary»>Save changes</a>
  12.  </div>
  13. </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.

Launch demo modal
  1. <– Button to trigger modal –>
  2. <a href=«#myModal» role=«button» class=«btn» data-toggle=«modal»>Launch demo modal</a>
  3.  
  4. <– Modal –>
  5. <div class=«modal» id=«myModal» tabindex=«-1» role=«dialog» aria-labelledby=«myModalLabel» aria-hidden=«true»>
  6.  <div class=«modal-header»>
  7.  <button type=«button» class=«close» data-dismiss=«modal» aria-hidden=«true»>×</button>
  8.  <h3 id=«myModalLabel»>Modal header</h3>
  9.  </div>
  10.  <div class=«modal-body»>
  11.  <p>One fine body…</p>
  12.  </div>
  13.  <div class=«modal-footer»>
  14.  <button class=«btn» data-dismiss=«modal» aria-hidden=«true»>Close</button>
  15.  <button class=«btn btn-primary»>Save changes</button>
  16.  </div>
  17. </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.

  1. <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:

  1. $(‘#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 load method and injected into the .modal-body. If you’re using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

  1. $(‘#myModal’).modal({
  2. keyboard: false
  3. })

.modal(‘toggle’)

Manually toggles a modal.

  1. $(‘#myModal’).modal(‘toggle’)

.modal(‘show’)

Manually opens a modal.

  1. $(‘#myModal’).modal(‘show’)

.modal(‘hide’)

Manually hides a modal.

  1. $(‘#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).
  1. $(‘#myModal’).on(‘hidden’, function () {
  2.  // do something…
  3. })
Compartir:
            

Artículos relacionadosMás del autor