Using bootstrap.modal

Call the modal via javascript:

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

Options

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.
centered	boolean	true	Centers the modal to the screen.

Markup

You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

        <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
      

        <div class="modal hide" id="myModal">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
        </div>
        <div class="modal-body">
        <p>One fine body…</p>
        </div>
        <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
        </div>
        </div>
      

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…
        })