Modals

                        
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn default" 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-red btn-flat ">Disagree</a>
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>
                        
                    

                        
$(document).ready(function(){
    // Initialized modal
    $('.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');
});
                        
                    

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

<!-- Modal Structure -->
<div id="modal2" 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-action modal-close waves-effect waves-red btn-flat ">Disagree</a>
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> 
    </div>
</div>
                        
                    

                        
$(document).ready(function(){
    // Initialized modal
    $('.modal').modal();
    //You can also open modals programatically, the below code will make your modal open on document ready:
    $('#modal2').modal('open');
    //You can also close them programatically:
    $('#modal2').modal('close');
});
                        
                    

                        
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn default" href="#modal3">Modal</a>

<!-- Modal Structure -->
<div id="modal3" 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>
                        
                    

                        
$(document).ready(function(){
    // Initialized modal
    $('.modal').modal();
    //You can also open modals programatically, the below code will make your modal open on document ready:
    $('#modal3').modal('open');
    //You can also close them programatically:
    $('#modal3').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. To do this, just place your function in the intialization code as shown below.

• JS

                        
$('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      in_duration: 300, // Transition in duration
      out_duration: 200, // Transition out duration
      starting_top: '4%', // Starting top style attribute
      ending_top: '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
    }
);