Modal

Modal Components

A JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Included below are the modal header, modal body, and modal footer.

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself.

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Optional sizes

Modals have two optional sizes - .modal-lg and .modal-sm, available via modifier classes to be placed on a .modal-dialog.

Modal with elements

Place a popover, a tooltip, forms, an editor or even a carousel within modals as needed.