Materialize CSS modals are used for dialog boxes, confirmation messages, or other content that can be called up.
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>
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>
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 -->
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>
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>