Materialize CSS Modals

Materialize CSS modals are a key feature of the Materialize CSS framework. A modal is a user interface component that overlays the main content of a page, providing a focused area for interaction. It can be used for various purposes such as user notifications, interactions, content presentation, space optimization, and to draw attention to specific elements for an enhanced user experience.
Materialize modals typically include text, images, forms, or other HTML elements that are displayed on top of the rest of the page content. They also feature a closing button, which can be clicked to close the modal or by clicking outside of the modal area.

Materialize CSS Modal Types

There are following types of modal in materialize CSS. Let us discuss each of them in detail.

Basic Modal- It consists of modal footer & content section.
Modals with Fixed Footer - It is used when the content is very long
Bottom Sheet Modals - It opens from the bottom side of the user screen.

Materialize Modal Classes: - Materialize modal is divided into two sub-categories, such as the modal footer and modal content section. Materialize CSS framework provides different predefined classes for modals. These are:

.modal - It is used to define the modal of the materializeCSS.
.modal-content - This class is responsible for all the web content.
.modal-footer - Place all the button or link elements inside the modal footer section.

Example

Live Demo

Steps To Create A Basic Materialize Modals

Follow the given below steps to create a materializeCSS modal.

In the first step, create a modal trigger button using hyperlinks or button elements and assign the .modal-trigger class.

After that, assign the modal Id attribute value to the link element's href attribute or to the data-target attribute of the button element.

Make sure the href attribute's or data-target attribute's value is preceded by a hash.
Modal trigger
```
    
   
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
  
  <button data-target="modal1" class="btn modal-trigger">Modal</button>
   
```

In the second step, add the .modal class to the modal container (modal structure) and make sure the modal has a unique ID attribute value. The .modal-content container contains modal body content, while the .modal-footer is useful for buttons or links.

Modal Structure
        
 <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>
   
  

At the end, initialize the modal either using Javascript or jQuery.

Initialization
        
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('.modal').modal();
  });
   
  

General Syntax

      <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal_box">
  Basic Modal
</a>
<!-- Modal Structure -->
<div id="modal_box" class="modal">
  <div class="modal-content"></div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn">
      close
    </a>
  </div>
</div>

Try it now

Source Code

          <a class="waves-effect waves-light btn modal-trigger" href="#modal_box">Basic Modal</a>
<!-- Modal Structure -->
<div id="modal_box" class="modal">
  <div class="modal-content">
     <b>Modal Heading</b>
     <p>Write Your modal content here,</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn">close</a>
  </div>
</div>

Try it now

Modal With Fixed Footer

When the content is very long, this type of modal is used. In this modal, the action button is visible all the time. Add the modal-fixed-footer as well as .modal class to the modal container to create a fixed-width modal.

Example

Live Demo

Source Code

          <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal_box">
  Modal With Fixed Footer
</a>
<!-- Modal Structure -->
<div id="modal_box" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>Modal content goes here.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn">
      Agree
    </a>
  </div>
</div>

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.

Example

Live Demo

Source Code

          <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">
  Modal
</a>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
  <div class="modal-content">
    <p>This section is used for web content.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">
      Agree
    </a>
  </div>
</div>

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.

Example

Live Demo

Source Code

          <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">
  Modal
</a>
<!-- Modal Trigger -->
<button data-target="modal1" class="btn modal-trigger">
  Modal
</button>

Try it now

Conclusion

Materialize CSS modals are used for dialog boxes, confirmation messages, etc. It is mainly divided into three parts, such as basic modals, modals with fixed footers, and bottom sheet modals. Basically, a modal consists of a modal footer and a content body section. Place a button and link inside the modal footer, and web content inside the modal content section.

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Modals

Materialize CSS Modal Types

Steps To Create A Basic Materialize Modals

Modal trigger

Modal Structure

Initialization

Modal With Fixed Footer

Bottom Sheet Modals

Modals with Button Trigger

Conclusion

Web Tutorials