Modal in materialize css

 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.

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

Modals with Button trigger

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>
          

Initialization

To open a modal using a trigger:

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

  // Or with jQuery

  $(document).ready(function(){
    $('.modal').modal();
  });
          

Options

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