Material Admin
Modal
Basic Modal
Use a 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. To add a close button, just add the class .modal-close to your button.
<!-- 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 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>
Initialization
To open a modal using a trigger:
var elem = document.querySelector('.modal');
var instance = M.Modal.init(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.modal').modal();
});
Options
| Name | Type | Default | Description |
|---|---|---|---|
| opacity | Number | 0.5 | Opacity of the modal overlay. |
| inDuration | Number | 250 | Transition in duration in milliseconds. |
| outDuration | Number | 250 | Transition out duration in milliseconds. |
| onOpenStart | Function | null | Callback function called before modal is opened. |
| onOpenEnd | Function | null | Callback function called after modal is opened. |
| onCloseStart | Function | null | Callback function called before modal is closed. |
| onCloseEnd | Function | null | Callback function called after modal is closed. |
| dismissible | Boolean | true | Allow modal to be dismissed by keyboard or overlay click. |
| startingTop | String | '4%' | Starting top offset |
| endingTop | String | '10%' | Ending top offset |
Methods
Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:
var instance = M.Modal.getInstance(elem);
/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.
$('.modal').modal('methodName');
$('.modal').modal('methodName', paramName);
*/
.open();
Open modal
instance.open();
.close();
Close modal
instance.close();
.destroy();
Destroy plugin instance and teardown
instance.destroy();
Properties
| Name | Type | Description |
|---|---|---|
| el | Element | The DOM element the plugin was initialized with. |
| options | Object | The options the instance was initialized with. |
| isOpen | Boolean | If the modal is open. |
| id | string | ID of the modal element |
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="waves-effect waves-light btn modal-trigger" 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 Bottom Sheet Style
<!-- 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>