# 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.

##### Get this party started?

Turn up the jams and have a good time.

## 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.

##### Get this party started?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia numquam ea consectetur nisi qui culpa earum rem porro? Nobis tempore soluta quia quis velit delectus animi veritatis molestias ab ut.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quidem dolorum doloribus possimus id quod molestias incidunt, rem voluptates sint praesentium magni debitis repellat impedit maiores blanditiis similique autem minus.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint corporis harum ad dolor consequatur reprehenderit, aperiam, minima nostrum, laborum modi accusantium nisi ullam aliquam aut ea sit qui sequi mollitia.

Lorem ipsum dolor sit amet consectetur adipisicing elit. At, ex quo? Eaque veritatis magni sapiente adipisci molestiae suscipit. Nam, illo voluptatum veniam similique maiores temporibus iusto quo eum minima ad.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur commodi ex ipsam atque, facere est unde rerum deleniti totam, voluptatum numquam aspernatur assumenda quaerat ipsa accusantium. Ipsam illum aliquid impedit!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quibusdam odit voluptates quam voluptatem praesentium fugit dignissimos rem porro quia distinctio, at non autem illum ipsum quod enim amet ipsam.

## 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.

##### Get this party started?

Turn up the jams and have a good time.

## 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.

##### Get this party started?

Turn up the jams and have a good time.

## 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.

##### Extra large modal!

Turn up the jams and have a good time.

##### Large modal!

Turn up the jams and have a good time.

##### Small modal!

Turn up the jams and have a good time.

## 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.

##### Get this party started?

Turn up the jams and have a good time.

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 Modal Documentation

Bootstrap's modal component documentation

Related Link arrow_upward