Materialize CSS Modals

Materialize CSS modals are used for dialog boxes, confirmation messages, or other content that can be called up. Modal has different sub-sections such as modal content as well as modal-footer section. The modal content section consists of modal content while the modal footer section includes a modal close button or link button.

Example

Open Demo

Basic Steps To Create A Materialize Modals.

Create modal trigger button and assign the .modal-trigger class to the button or hyperlink element & assign modal id to the link element's href attribute value & keep in mind that href attribute value must be preceded by hash.
Modal trigger
```
    
   
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
   
```

make sure that modal structure has unique id and assign the .modal class to the modal structure.

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 markup

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>

Try It Now

Source Code

     
      <!-- 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 yourself

Modal With Fixed Footer

Modal with fixed footer is used to show the modal footer actionable button all the time to the user.To create modal width fixed footer, use the .modal-fixed-footer class.

Example

Open Demo

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 modal-fixed-footer"></div>

Try It Now

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>
<!-- End Modal  -->

Try it yourself

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

Open Demo

General Syntax

    <!-- 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>

Try It Now

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">
    <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>

Try it yourself

Modals With Button trigger

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

Example

Open Demo

General Syntax

    <!-- Modal Trigger -->
<button data-target="modal1" class="btn modal-trigger">Modal Trigger Button</button>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet"></div>

Try It Now

Source Code

     
      <!-- Modal Trigger -->
<button data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
  <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>

Try it yourself

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS

Materialize CSS Modals

Modal trigger

Modal Structure

Initialization

Modal With Fixed Footer

Bottom Sheet Modals

Modals With Button trigger

Web Tutorials