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

      <!-- 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">
    <h4>Modal Heading</h4>
    <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>
<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">
    <h4>Modal Heading</h4>
    <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

General Syntax

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

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

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

Materialize CSS Modals

Basic Steps To Create Materialize Modal

Modal With Fixed Footer

Bottom Sheet Modals

Modals with Button Trigger

Web Tutorials