The Modal component in Materialize CSS

The Materialize CSS has a built-in modal component that you may use easily for creating dialog boxes or presenting important content to the visitors where underlying content becomes inactive until the modal window is closed.

The modal can be closed by clicking anywhere outside the modal window or using the close button within the modal. So, you may also use modal for the confirmation messages.

Creating materialize modal is easy and require a few line of codes of HTML and jQuery. In order to modal component work, you need to include the reference to materialize.min.js along with jQuery on the web page.

The following section shows how to create modal using materialize framework with live demo and code snippets.

The example of simple modal

A basic modal contains content and footer. The modal-content class is referred to the main div where you may provide the header and content for the modal.

Use the modal-footer class in another div where close button along with other action buttons can be used. Have a look at the markup, jQuery code and working modal by clicking the link or image below:

materialize modal simple

See online demo and code

The markup for the modal:

A little script for initializing the plug-in:

The example of fixed footer modal

In above modal example, if your content is bigger then footer positions down according to the content. For the large content in modal, you may create the footer with action buttons that are fixed. For creating the fixed footer modal, use the modal-fixed-footer class along with the modal class in the main container element.

Have a look at this demo where I used long demo text in the content section of modal and you can see three buttons in the footer remain fixed.

materialize modal fixed footer

See online demo and code

The markup and script:

How to change the size of the modal window?

By default, the width of the modal window is set 55% of the screen size. The max-width is set to 70%. You may require changing the size of the modal as per the need of your project.

For changing the width of the modal, you may extract the modal class from the materialize CSS and change the width as you want. Make sure placing the modal class after the reference to materialize CSS file; either in your own external CSS file or in the <style> section within the web page.

See the example below where I set the size of the modal to 35%.

materialize modal small

See online demo and code

The CSS:

You can see the markup, style etc. in the example page.

How to change the default look of modal?

Just like the size of the modal, you may also customize the default colors of complete modal or content body and footer separately.

As you have seen, the default colors are whitish for complete modal. For changing the colors, you may get the modal class for content body and modal-footer class for the footer section of the modal in Materialize CSS and replace the background-color values by new color codes.

Have a look at this example where I changed both section’s colors:

materialize modal custom

See online demo and code

The CSS for this example:

The markup:

Closing the modal by button click only example

In all above examples, the modal can be closed by clicking anywhere outside the modal area. Besides, you may close the modal by pressing the button within the modal.

In certain scenarios, you may want allowing the visitors closing the modal only by clicking the “Close”, “Ok”, “Cancel” button etc. within the modal.

For doing that, you may use the dismissible option in the JavaScript as initializing the modal plug-in. The default value for the dismissible option is true, so modal can be closed by clicking anywhere outside of the modal.

Set the dismissible = false for disabling that feature. See the demo and code below, especially script section for using this option. In the demo page, you will see, the modal will be closed only by pressing the button within the modal.

See online demo and code

The script:

The example of bottom sheet modal

You may also create modals that display to the bottom of the user’s screen rather than the middle. The content with action features can be displayed. The bottom sheet modal acts just like the normal modal that can be closed by clicking anywhere on the screen as well as using the button inside that modal.

For that, use the bottom-sheet class along with the modal class in the <div> container. Just like above modal examples, use the modal-content and modal footer classes with required content for bottom sheet modals as shown in the example below:

materialize bottom sheet modal

See online demo and code

The markup:

Grab the complete code from the example page.