<!-- 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>
<!-- 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 -->
<!-- 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>
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>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');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
}
);