Materialize css модальное окно

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Title First Line
Second Line grade
folder Title First Line
Second Line grade
assessment Title First Line
Second Line grade
play_arrow Title First Line
Second Line grade

  Modal   Modal Header
 A bunch of text
 
 Agree

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.

Initialization

To open a modal using a trigger:

 document.addEventListener('DOMContentLoaded', function() < var elems = document.querySelectorAll('.modal'); var instances = M.Modal.init(elems, options); >); // Or with jQuery $(document).ready(function()< $('.modal').modal(); >);

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.

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

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();

Источник

Materialize Css provides predefined classes to create beautiful modals. Materialize Css Modal Popup are used widely in any application so it is important to understand how we can use these popups. Here in this tutorial, we are going to explain how to create modal popup in Materialize css framework. You can also use our online editor to edit and run the code online.

Class modal is used to define the modal, Class modal-content is used to define the content body. Class modal-footer defines the modal footer. Here is an example of Materialize modal popup.-

Example:

Modal Tutorialsplane.com Learn more @ tutorialsplane.com!
 
 Close

Modal class modal-fixed-footer is used to create fixed footer. This class makes footer fixed in case of fixed footer.

Option	Description
dismissible	Whether Modal should be unmissable or not.
opacity	Adds opacity of overlay background.
inDuration	Transition in duration.
outDuration	Transition Our duration.
startingTop	To add top style attribute.
endingTop	To Add ending top style.
ready	Callback function when modal is ready.
complete	Callback function when modal is closed.

Materialize css модальное окно

The Modal component in Materialize CSS

The example of simple modal

See online demo and code