Modals

Dialog boxes to display lightbox, notifications, or other custom content
Default Bootstrap Modal
Modal Default:
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModal')
    | Launch Demo Modal
//- Modal
#exampleModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
    .modal-dialog(role='document')
        .modal-content
            .modal-header
                h5#exampleModalLabel.modal-title Default Bootstrap Modal
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
                button.btn.btn-primary(type='button') Save changes
The default Bootstrap modal has been restyled for the SB Admin Pro theme.
Static Backdrop:
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#staticBackdrop')
    | Launch Static Backdrop Modal
//- Modal
#staticBackdrop.modal.fade(data-bs-backdrop='static', tabindex='-1', role='dialog', aria-labelledby='staticBackdropLabel', aria-hidden='true')
    .modal-dialog(role='document')
        .modal-content
            .modal-header
                h5#staticBackdropLabel.modal-title Static Backdrop Modal
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
                button.btn.btn-primary(type='button') Understood
The static backdrop modal option cannot be dismissed by clicking outside of the modal pane. Instead, the user must dismiss the modal by using the close button within the modal pane.
Scrollable Bootstrap Modals
Page Scrolling Long Modal:
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalLong')
    | Launch Scrollable Modal
//- Modal
#exampleModalLong.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLongTitle', aria-hidden='true')
    .modal-dialog(role='document')
        .modal-content
            .modal-header
                h5#exampleModalLongTitle.modal-title Long Modal with Page Scrolling
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
                button.btn.btn-primary(type='button') Save changes
By default, the content within a modal will scroll independently of the page if the content is too long. If you don't want the page to scroll, use the next option.
Modal Dialog Scrolling Long Modal:
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalScrollable')
    | Launch Scrollable Modal
//- Modal
#exampleModalScrollable.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalScrollableTitle', aria-hidden='true')
    .modal-dialog.modal-dialog-scrollable(role='document')
        .modal-content
            .modal-header
                h5#exampleModalScrollableTitle.modal-title Modal title
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
                button.btn.btn-primary(type='button') Save changes
Add .modal-dialog-scrollable to the .modal-dialog to make longer modal content scroll within the modal body if the contents is longer than the viewport height.
Vertically Centered Bootstrap Modal
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalCenter')
    | Launch Vertically Centered Modal
//- Modal
#exampleModalCenter.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalCenterTitle', aria-hidden='true')
    .modal-dialog.modal-dialog-centered(role='document')
        .modal-content
            .modal-header
                h5#exampleModalCenterTitle.modal-title Vertically Centered Modal
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
                button.btn.btn-primary(type='button') Save changes
Add .modal-dialog-centered to the .modal-dialog to vertically center the modal dilog when the modal window appears.
Modal Sizing
//- Extra large modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalXl') Extra Large
.modal.fade#exampleModalXl(tabindex='-1', role='dialog', aria-labelledby='myExtraLargeModalLabel', aria-hidden='true')
    .modal-dialog.modal-xl(role='document')
        .modal-content
            .modal-header
                h5.modal-title Extra Large Modal
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                p This is an example of an extra large modal!
            .modal-footer
                button.btn.btn-primary(type='button', data-bs-dismiss='modal') Close
//- Large modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalLg') Large
.modal.fade#exampleModalLg(tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true')
    .modal-dialog.modal-lg(role='document')
        .modal-content
            .modal-header
                h5.modal-title Large Modal
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                p This is an example of a large modal.
            .modal-footer
                button.btn.btn-primary(type='button', data-bs-dismiss='modal') Close
//- Small modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalSm') Small
.modal.fade#exampleModalSm(tabindex='-1', role='dialog', aria-labelledby='mySmallModalLabel', aria-hidden='true')
    .modal-dialog.modal-sm(role='document')
        .modal-content
            .modal-header
                h5.modal-title Small Modal
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
            .modal-body
                p This is an example of a small modal.
            .modal-footer
                button.btn.btn-primary(type='button', data-bs-dismiss='modal') Close
Add .modal-xl , .modal-lg , or .modal-sm to the .modal-dialog to adjust the sizing of your Bootstrap modals.
Bootstrap Documentation Available

Modals are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of modals within your project, visit the official Bootstrap modal documentation page.

Visit Bootstrap Modal Docs