Materialize CSS – Modals
Materialize CSS uses modal component for creating dialog boxes, confirmation messages or presenting important content to the viewers where underlying content becomes inactive until the modal window is closed.
In order for the modal to work, add the modal Id to the link of the trigger and include the reference materialize.min.js along with jQuery on the web page. To add a “close” button, add the class modal-close to your button.
Types of Modals:
Basic Modal: The basic modal consist of content and footer. The modal-content class is referred to the “main” div and the modal-footer class in another “div” tag where the “action” button is used.
Example:
HTML
<!DOCTYPE html><html><head><linkrel="stylesheet"href=<linkhref=<scripttype="text/javascript"src=</script><scriptsrc=</script></head><bodyclass="container "><divclass="card-panel center"><h3>Geeks for Geeks</h3><!-- Modal Trigger --><aclass="waves-effect waves-light btngreen darken-1 modal-trigger"href="#demo-modal">Click Here!</a><!-- Modal Structure --><divid="demo-modal"class="modal"><divclass="modal-content"><h4>Demo of Simple Modal</h4><p><divclass="red-text">Content of the modal goes here. <br>Type information here. <br></div>C is a procedural programming language.It was initially developed by DennisRitchie as a system programming languageto write operating system. The mainfeatures of C language include low-levelaccess to memory, simple set of keywords,and clean style, these features make Clanguage suitable for system programminglike operating system or compiler development.</p></div><divclass="modal-footer"><ahref="#!"class="modal-actionmodal-close waves-effect waves-greenbtn green lighten-1">Close</a></div></div></div><script>$(document).ready(function () {$('.modal').modal();})</script></body></html>Output:
Modal with Fixed Footer: If the content is large, then this type of modal is used. In this we can create “action” buttons that are fixed. For this, modal-fixed-footer class is used along with the modal class in the main container element.
Example:
HTML
<!DOCTYPE html><html><head><linkrel="stylesheet"href=<linkhref=<scripttype="text/javascript"src=</script><scriptsrc=</script></head><body><divclass="container center"><divclass="card-panel"><h3>Geeks for Geeks</h3><!-- Modal Trigger --><aclass="waves-effect waves-light btngreen darken-1 modal-trigger"href="#demo-modal-fixed-footer">Click Here!</a><!-- Modal Structure --><divid="demo-modal-fixed-footer"class="modal modal-fixed-footer"><divclass="modal-content"><h4>Modal with Fixed Footer</h4><divclass="red-text">Content of the modal goes here. <br>Type information here. <br></div><pclass="center">An array is a collection of itemsstored at contiguous memory locations.<br>The idea is to store multiple items ofthe same type together.<br> This makesit easier to calculate the position<br>of each element by simply adding anoffset to a base value,<br> i.e., thememory location of the first element ofthe array <br>(generally denoted by thename of the array).<br></p><pclass="center">An array is a collection of items storedat contiguous memory locations.<br>The idea is to store multiple items ofthe same type together.<br>This makes it easier to calculate theposition of each element <br>by simply adding an offset to a basevalue, i.e., the memory location of <br>the first element of the array (generallydenoted by the name of the array).<br></p></div><divclass="modal-footer"><ahref="#!"class="modal-actionmodal-close btn green darken-1">Agree</a><ahref="#!"class="modal-actionmodal-close btn red darken-1">Disagree</a></div></div></div></div><script>$(document).ready(function () {$('.modal').modal();})</script></body></html>Output:
Bottom Sheet Modal: Modals can be displayed to the bottom of the user’s screen and not the middle. It is just like the normal modal that can be closed by clicking anywhere on the screen as well as using the button inside that modal. For this, bottom-sheet class is used along with the modal class in the <div> container.
Example:
HTML
<!DOCTYPE html><html><head><linkrel="stylesheet"href=<linkhref=<scripttype="text/javascript"</script><scriptsrc=</script></head><bodyclass="container "><divclass="card-panel center"><h3>Geeks for Geeks</h3><!-- Modal Trigger --><aclass="waves-effect waves-lightbtn green darken-1 modal-trigger"href="#demo-modal">Click Here!</a><!-- Modal Structure --><divid="demo-modal"class="modal bottom-sheet"><divclass="modal-content"><h4>Demo of Bottom sheet Modal</h4><p><divclass="red-text">Content of the modal goes here. <br>Type information here. <br></div>An array is a collection of items stored atcontiguous memory locations.The idea is to store multiple items of thesame type together.</p></div><divclass="modal-footer"><ahref="#!"class=" modal-actionmodal-close waves-effectwaves-green btn red">Close</a></div></div></div><script>$(document).ready(function () {$('.modal').modal();})</script></body></html>Output:
