Modal Bootstrap

JS Modal (modal.js)

The Modal plugin is a dialog box/popup window that is displayed on top of the current page.

For a tutorial about Modals, read our Bootstrap Modal Tutorial.

The Modal Plugin Classes

Class	Description
.modal	Creates a modal
.modal-content	Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer.
.modal-header	Defines the style for the header of the modal
.modal-body	Defines the style for the body of the modal
.modal-footer	Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left\|center
.modal-sm	Specifies a small modal
.modal-lg	Specifies a large modal
.fade	Adds an animation/transition effect which fades the modal in and out

Trigger the Modal Via data-* Attributes

Add data-toggle="modal" and data-target="#modalID" to any element.

Note: For <a> elements, omit data-target, and use href="#modalID" instead:

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>