Materialize CSS Modals

Materialize CSS Modals

Materialize CSS modals are used for dialog boxes, confirmation messages, or other content that can be called up.

Basic Steps To Create Materialize Modal

To create a basic modal, you just assign the modal ID to the link of the trigger element.

General Syntax

Try it now

Source Code

Try it now

Modal With Fixed Footer

General Syntax

Try it now

Bottom Sheet Modals

Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.

General Syntax

Try it now

Modals with Button trigger

If you prefer to use a button instead of a hyperlink(<a>) to open a modal, specify the Modal ID in the data-target attribute rather than the href attribute.

General Syntax

Try it now