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.
The scrollable modal allows for content in the modal that exceeds the height of the viewport. In this example, we use Bootstrap's
class on the modal dialog with custom styling applied to add borders to the header and footer, matching Material Design's style specifications.
In Material Design, dialogs are vertially centered by default. To acheive this, simple add the
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 attributes to the modal element, demonstrated below.
Modal Sizing Options
Append the modal dialog class with either the
class for sizing options other than the default.
Full Screen Modal
A final sizing option available is the full screen modal. Add the
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