Color Scheme

Modals

Materialize is a modern responsive CSS framework based on Material Design by Google.

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.

Upgrade > 2.1.1
  • 1. search all elements with class="modal" and add "popover" attribute
  • 2. replace `data-target="id"` with `popovertarget="id"`.
  • 3. replace close-triggers with `popovertarget="id"` (toggle)

Show BottomSheet Modal via a-tag 

<button class="btn waves-effect waves-light" popovertarget="modal1">Show</button>
<a class="btn tonal" href="javascript:modal1.showPopover()">Show via Link</a>

<div id="modal1" class="modal" popover>
  <div class="modal-header">
    <h4>Modal Header</h4>
  </div>
  <div class="modal-content">
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <button tabindex="0" class="waves-effect btn-flat" popovertarget="modal1">Agree</button>
  </div>
</div>

Initialization

To open a modal using a trigger:


// No initialization needed in > 2.1.1
document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.modal');
  const instances = M.Modal.init(elems, {
    // specify options here
  });
});

Options

Customize behavior of Modals via CSS. For example, you can call a custom function to run when a modal is dismissed. To do this, just place your function in the initialization code as shown below.

Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:

const modal = document.querySelector('#modal-1');
.showPopover();

Open dismissible

modal.showPopover();
.hidePopover();

Close

modal.hidePopover();

Properties

Name Type Description
- - Check out the Popover API for more details.

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.


<a class="btn tonal waves-effect waves-light" href="javascript:modal1.showPopover()">Show BottomSheet Modal</a>

<div id="modal1" class="modal bottom-sheet" popover>
  <div class="modal-header">
    <h4>Modal Header</h4>
  </div>
  <div class="modal-content">
    <p>A bunch of text</p>
  </div>
</div>