Modals

Basic Modals

Default Modal

Toggle a modal via JavaScript by clicking the button above.

Modal With Icons

With some icons and success alert to give success message.

Disable Keyboard

By Default, closes the modal when escape key is pressed. Disable keyboard interaction using data-backdrop="false".

Disable Backdrop

Disable backdrop element using data-backdrop="false", it includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on outsidedata-backdrop="false" click.

Modal Show

Manually opens a modal. Returns to the caller before the modal has actually been shown.

Disable Animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Modal Themes

Primary Modal Template

To use primary modal theme, add .bg-primary class to the .modal-header container

Success Modal Template

To use success modal theme, add .bg-success class to the .modal-header container

Danger Modal Template

To use danger modal theme, add .bg-danger class to the .modal-header container

Info Modal Template

To use info modal theme, add .bg-info class to the .modal-header container

Warning Modal Template

To use warning modal theme, add .bg-warning class to the .modal-header container

Border Modal Template

To use Border color modal theme, add .border-COLORNAME class to the .modal-content container

Modal Sizes

Extra Small Modal Size

Add class .modal-xs with .modal-dialog to use Extra Small size of modal.

Small Modal Size

Add class .modal-sm with .modal-dialog to use small size of modal.

Default Modal Size

For default size, modal markup doesn't require any additional sizing class.

Large Modal

Add class .modal-lg with .modal-dialog to use large size of modal.

Extra Large Modal

Add class .modal-xl with .modal-dialog to use extra large size of modal.

Modal Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself

OnShow Modal Event

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.

OnShown Modal Event

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.

OnHide Modal Event

This event is fired immediately when the hide instance method has been called.

OnHidden Modal Event

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).