Dialog box

Buttons comprise of a base structure containing the dialog contents in header, body and footer sections.

The header contains the title of the dialog box along with an optional close button. The footer is the ideal place to put the relevant action buttons while the body contains the detail of the event.

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.


        <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 available from the standard bootstrap installation; reproduced here for convenience.

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.
remote	path	false	If a remote URL is provided, content will be loaded via jQuery's `load` method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the `href` attribute to specify the remote source. An example of this is shown below: `<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.

$('#myModal').modal({
  keyboard: false
  })

.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).

$('#myModal').modal('toggle')

.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).

$('#myModal').modal('show')

.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).

$('#myModal').modal('hide')

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).

    
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 id="myModalLabel" class="modal-title">Dialogue Title</h4>
            </div>
            <div class="modal-body">
              Dialogue body content
            </div>
            <div class="modal-footer">
              <a href="javascript:void(0);" data-dismiss="modal">Cancel</a>
              <button type="button" class="btn btn-default">
                Save
              </button>
            </div>
          </div>
        </div>
      </div>

Lightbox -- can be closed only on clicking cancel/close button

To stop the behavior of closing lightbox on clicking anywhere outside lightbox can be achieved by adding data attributedata-close-background="false" to the <div class="modal lightbox"></div> div

Example:


    <div class="modal lightbox fade" data-close-background="false" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      ...
    </div>

Click to open a lightbox

Add a prompt before closing a lightbox.

On the cancel button of lightbox, use data-close-prompt="Are you sure?" attribute instead of data-dismiss="modal"


      <div class="modal lightbox fade" data-close-background="false" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h4 id="myModalLabel2" class="modal-title">Dialogue Title</h4>
            </div>
            <div class="modal-body">
              .
              .
              .
            </div>
            <div class="modal-footer">
              <a href="javascript:void(0);" data-close-prompt="Prompt Message">Cancel</a>
              <button type="button" class="btn btn-default">
                Save
              </button>
            </div>
          </div>
        </div>
      </div>

Dialogue Title