Modals - Materialize [Modified]

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. To make the overlay blurry, add blur-overlay class to the modal element. If you just want the modal itself to have the blur effect, just add blur-bg to the modal element and blur-bg acrylic if you want the acrylic effect also.

For outlined primary modals, the outline color follows the semantic colors just like in buttons. You can change the primary to success, info, warning or danger. If you just use the outlined class, the border color will fallback to secondary color. Please note that outline on bottom-sheet is a bit different.

Modal Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Modal Header


  <!-- 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>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>
  
  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1-1">Modal (Blurred Overlay)</a>

  <!-- Modal Structure -->
  <div id="modal1-1" class="modal blur-overlay">
    <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>

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

  <!-- Modal Structure -->
  <div id="modal1-2" class="modal blur-bg">
    <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>

  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1-3">Modal (Blurred Background, Acrylic)</a>

  <!-- Modal Structure -->
  <div id="modal1-3" class="modal blur-bg acrylic">
    <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 to open a modal specify the Modal ID in data-target rather than the href attribute.


  <!-- Modal Trigger -->
  <button data-target="modal1" class="btn modal-trigger">Modal</button>

To open a modal using a trigger:


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
      // specify options here
    });
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.modal').modal({
      // specify options here
    });
  });

You can customize the behavior of each modal using these options. 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.

Name	Type	Default	Description
opacity	Number	0.5	Opacity of the modal overlay.
inDuration	Number	250	Transition in duration in milliseconds.
outDuration	Number	250	Transition out duration in milliseconds.
onOpenStart	Function	null	Callback function called before modal is opened.
onOpenEnd	Function	null	Callback function called after modal is opened.
onCloseStart	Function	null	Callback function called before modal is closed.
onCloseEnd	Function	null	Callback function called after modal is closed.
preventScrolling	Boolean	true	Prevent page from scrolling while modal is open.
dismissible	Boolean	true	Allow modal to be dismissed by keyboard or overlay click.
startingTop	String	'4%'	Starting top offset
endingTop	String	'10%'	Ending top offset

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:
  var instance = M.Modal.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.modal').modal('methodName');
    $('.modal').modal('methodName', paramName);
  */
        

.open();

Open modal


instance.open();

.close();

Close modal


instance.close();

.destroy();

Destroy plugin instance and teardown


instance.destroy();

Name	Type	Description
el	Element	The DOM element the plugin was initialized with.
options	Object	The options the instance was initialized with.
isOpen	Boolean	If the modal is open.
id	string	ID of the modal element

If you have content that is very long and you want the action buttons to be visible all the time, you can add the modal-fixed-footer class to the modal.


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

  <!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-footer">
    <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 want to keep the header always visible, add modal-fixed-header class to the modal and also add a <div class="modal-header"> element inside the modal container for your header.


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

  <!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-header">
    <div class="modal-header">Modal Header</div>
    <div class="modal-content">
      <p>A bunch of text</p>
    </div>
  </div>

You can also combine both fixed header and fixed footer.


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

  <!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-header modal-fixed-footer">
    <div class="modal-header">Modal Header</div>
    <div class="modal-content">
      <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>

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.


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

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

  <!-- Modal Structure -->
  <div id="modal1-1" class="modal bottom-sheet blur-overlay">
    <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>

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

  <!-- Modal Structure -->
  <div id="modal1-2" class="modal bottom-sheet blur-bg">
    <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>

Introduction
Button Trigger
Initialization
Options
Methods
Properties
Fixed Footer
Fixed Header
Fixed Header & Footer
Bottom Sheet

Modals with Button trigger

Initialization

Options

Methods

.open();

.close();

.destroy();

Properties

Modals with Fixed Footer

Modals with Fixed Header

Modals with Fixed Header and Footer

Bottom Sheet Modals

Modal Header

Modal Header

Modal Header

Modal Header

Outlined Modal

Modal Header

Modal Header

Modal Header

Modal Header

Modal Header

Modals with Button trigger

Initialization

Options

Methods

.open();

.close();

.destroy();

Properties

Modals with Fixed Footer

Modals with Fixed Header

Modals with Fixed Header and Footer

Bottom Sheet Modals