Materialize CSS Modals, Working with Modals in Materialize CSS

Materialize CSS Tutorial

Materialize Modals

Use a Material Design 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.

Basic Modal

<!-- 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">
      <h4>Modal Header</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
         industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and 
         scrambled it to make a type specimen book.</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn">Agree</a>
    </div>
</div>

Output :

Modal With Fixed Footer

<!-- 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>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and 
      scrambled it to make a type specimen book ....</p>
   </div>
   <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn">Agree</a>
   </div>
</div>
<!-- End Modal  -->

Output :

Modal Bottom Sheet Style

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal_box">Modal Bottom Sheet Style</a>

<!-- Modal Structure -->
<div id="modal_box" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <ul class="collection">
          <li class="collection-item avatar">
            <img src="../images/free-time-learn-icon.png" alt="" class="circle">
            <span class="title">Free Time Learn</span>
            <p>www.freetimelearning.com</p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
          </li>
          <li class="collection-item avatar">
            <img src="http://www.freetimelearning.com/images/V-V-Ramana-Reddy.jpg" alt="" class="circle">
            <span class="title">V V R Reddy (Founder)</span>
            <p>vvrreddy@freetimelearning.com</p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
          </li>
          <li class="collection-item avatar">
            <i class="material-icons circle green">account_circle</i>
            <span class="title">V Suresh Reddy (CEO)</span>
            <p>vsreddy@freetimelearning.com</p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
          </li>
     </ul>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn">Agree</a>
    </div>
</div>

Output :

Modals with Button trigger

If you prefer to use a button to open a modal specify the Modal ID in data-target="modal" rather than the href attribute.

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

jQuery Plugin Initialization

To open a modal using a plugin :

$(document).ready(function(){
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('.modal').modal();
});

You can also open modals are automatically use this below script :

$('#modal1').modal('open');

You can also close them automatically use this script :

$('#modal1').modal('close');

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.

$('.modal').modal({
  dismissible: true, // Modal can be dismissed by clicking outside of the modal
  opacity: .5, // Opacity of modal background
  inDuration: 300, // Transition in duration
  outDuration: 200, // Transition out duration
  startingTop: '4%', // Starting top style attribute
  endingTop: '10%', // Ending top style attribute
  ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
    alert("Ready");
    console.log(modal, trigger);
  },
  complete: function() { alert('Closed'); } // Callback for Modal close
}
);

Materialize CSS Tutorial