Modals
<!-- 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-action modal-close waves-effect waves-green btn-flat">Agree</a></div></div>
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.
<!-- 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-action modal-close waves-effect waves-green btn-flat">Agree</a></div></div>
jQuery Plugin Initialization
To open a modal using a trigger:
$(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 programatically,the below code will make your modal open on document ready:
$('#modal1').modal('open');
You can also close them programatically:
$('#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. To do this,just place your function in the intialization code as shown below.
$('.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});