Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button.

Basic

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

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>Text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Disagree</a>
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
  </div>
</div>

With Fixed Footer

Modal
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>

<!-- Modal Structure -->
<div id="modal2" class="modal modal-fixed-footer">
  <div class="modal-content flow-text">
    <h4>Modal Header</h4>
    <p>Text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Disagree</a>
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
  </div>
</div>

Bottom Sheet

Modal
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal3" data-dismissible="true">Modal</a>

<!-- Modal Structure -->
<div id="modal3" class="modal bottom-sheet">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>Text</p>
  </div>
</div>

Options

You can customize the behavior of each modal using these options. For example, you can change background opacity or/and show effect speed. To do this, just place in your trigger tag some options.

<!-- Modal Trigger -->
<a class="btn modal-trigger" href="#modal1" data-dismissible="true" data-opacity="0.6" data-induration="400" data-outduration="300">Modal</a>
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John DoeHi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John DoeAlso, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John DoeHi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John DoeI do not use Facebook. But you can follow me in Twitter.
It's good idea!
John DoeYou can find me here - https://twitter.com/nkdevv