Modals
Materialize is a modern responsive CSS framework based on Material Design by Google.
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
Initialization
To open a modal using a trigger:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {
// specify options here
});
});
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 initialization code as shown below.
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. |
preventScrolling | Boolean | true | Prevent page from scrolling while modal is open. |
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
All the methods are called on the plugin instance. You can get the plugin instance like this:
var instance = M.Modal.getInstance(elem);
.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 |
Bottom Sheet Modals
Modal Bottom Sheet StyleBottom 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