Materialzie CSS Modals

Materialize CSS Modal

Materialize CSS modal is 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.

Basic Steps To Create Materialize CSS modal.

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

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

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

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

Source Code : Output

Modal With Fixed Footer

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

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

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

Source Code : Output

Modal

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.

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

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

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS