Modals
Modals are a JavaScript driven component that is default to the Bootstrap framework. In Material Admin Pro, we have taken the styling from Material's dialog component and applied the same principles to the Bootstrap defaults, creating a customized Modal component.
Default Modals
Modals are togglable dialogs that inform users of actions or events that have taken place. In this theme, the modal default animates in with a zoom in effect over a darkened backdrop.
The modal header, body, and footer have also been modified outside of Bootstrap to match the Material Design style, which includes our text button components as the action buttons in the modal footer.
Click on the button below to see this theme's default modal component in action.
Scrollable Modals
The scrollable modal allows for content in the modal that exceeds the height of the viewport. In this example, we use Bootstrap's
.modal-dialog-scrollable
class on the modal dialog with custom styling applied to add borders to the header and footer, matching Material Design's style specifications.
Centering Modals
In Material Design, dialogs are vertially centered by default. To acheive this, simple add the
.modal-dialog-centered
class to the modal dialog and the dialog will be centered after it animates in.
Static Backdrop Modals
By default, modals will dismiss when clicking outside of the modal dialog. This behavior can be disabled by adding the
data-bs-backdrop="static"
and
data-bs-keyboard="false"
data attributes to the modal element, demonstrated below.
Modal Sizing Options
Append the modal dialog class with either the
.modal-xl
,
.modal-lg
, or
.modal-sm
class for sizing options other than the default.
Full Screen Modal
A final sizing option available is the full screen modal. Add the
.modal-fullscreen
class to the modal dialog to use this variant. There are also responsive options available for full screen modals, which you can see on
Bootstrap's modal documentation
page.
Note: In the examples above, the modals are called using data attributes. Bootstrap's modals work with a combination of HTML, CSS, and JavaScript, and there are JavaScript implementation options available that you can reference on Bootstrap's modal documentation page.
Related Links
Bootstrap's modal component documentation