Materialize CSS modals are a key feature of the Materialize CSS framework. A modal is a user interface component that overlays the main content of a page, providing a focused area for interaction. It can be used for various purposes such as user notifications, interactions, content presentation, space optimization, and to draw attention to specific elements for an enhanced user experience.
Materialize modals typically include text, images, forms, or other HTML elements that are displayed on top of the rest of the page content. They also feature a closing button, which can be clicked to close the modal or by clicking outside of the modal area.
There are following types of modal in materialize CSS. Let us discuss each of them in detail.
Materialize Modal Classes: - Materialize modal is divided into two sub-categories, such as the modal footer and modal content section. Materialize CSS framework provides different predefined classes for modals. These are:
.modal
- It is used to define the modal of the materializeCSS. .modal-content
- This class is responsible for all the web content. .modal-footer
- Place all the button or link elements inside the modal footer section. Follow the given below steps to create a materializeCSS modal.
.modal-trigger
class.href
attribute or to the data-target attribute of the button element.href
attribute's or data-target attribute's value is preceded by a hash.
<!-- 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>
.modal
class to the modal container (modal structure) and make sure the modal has a unique ID attribute value.
The .modal-content
container contains modal body content, while the .modal-footer
is useful for buttons or links.
<!-- 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>
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 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">
<b>Modal Heading</b>
<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>
When the content is very long, this type of modal is used. In this modal, the action button is visible all the time. Add the modal-fixed-footer
as well as .modal
class to the modal container to create a fixed-width modal.
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>
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.
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">
<p>This section is used for web content.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">
Agree
</a>
</div>
</div>
Source Code
<!-- 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>
Materialize CSS modals are used for dialog boxes, confirmation messages, etc. It is mainly divided into three parts, such as basic modals, modals with fixed footers, and bottom sheet modals. Basically, a modal consists of a modal footer and a content body section. Place a button and link inside the modal footer, and web content inside the modal content section.