video_label Modals

Introduction

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.

Modals HTML Structure

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

Modals with Fixed Footer

If you have content that is very long and you want the action buttons to be visible all the time, you can add the modal-fixed-footer class to the modal.

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

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

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>
	            	
	            

jQuery Plugin Initialization

To open a modal using a trigger:

	            	
$(document).ready(function(){
	// the "href" attribute of .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
  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
});