Materialize CSS - Modals - GeeksforGeeks

09 Sep, 2020
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:HTMLHTML<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript" src=        "https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body class="container ">    <div class="card-panel center">        <h3>Geeks for Geeks</h3>        <!-- Modal Trigger -->        <a class="waves-effect waves-light btn             green darken-1 modal-trigger"             href="#demo-modal">            Click Here!        </a>          <!-- Modal Structure -->        <div id="demo-modal" class="modal">            <div class="modal-content">                <h4>Demo of Simple Modal</h4>                <p>                <div class="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 Dennis                 Ritchie as a system programming language                 to write operating system. The main                 features of C language include low-level                access to memory, simple set of keywords,                and clean style, these features make C                 language suitable for system programming                 like operating system or compiler development.                </p>            </div>              <div class="modal-footer">                <a href="#!" class="modal-action                     modal-close waves-effect waves-green                     btn 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:HTMLHTML<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript" src=        "https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body>    <div class="container center">        <div class="card-panel">            <h3>Geeks for Geeks</h3>            <!-- Modal Trigger -->            <a class="waves-effect waves-light btn                 green darken-1 modal-trigger"                 href="#demo-modal-fixed-footer">                Click Here!            </a>              <!-- Modal Structure -->            <div id="demo-modal-fixed-footer"                 class="modal modal-fixed-footer">                <div class="modal-content">                    <h4>Modal with Fixed Footer</h4>                    <div class="red-text">                        Content of the modal goes here. <br>                        Type information here. <br>                    </div>                    <p class="center">                        An array is a collection of items                         stored at contiguous memory locations.<br>                        The idea is to store multiple items of                         the same type together.<br> This makes                         it easier to calculate the position<br>                        of each element by simply adding an                         offset to a base value,<br> i.e., the                         memory location of the first element of                        the array <br>(generally denoted by the                         name of the array).<br>                    </p>                      <p class="center">                        An array is a collection of items stored                         at contiguous memory locations.<br>                        The idea is to store multiple items of                         the same type together.<br>                        This makes it easier to calculate the                         position of each element <br>                        by simply adding an offset to a base                         value, i.e., the memory location of <br>                        the first element of the array (generally                         denoted by the name of the array).<br>                    </p>                </div>                <div class="modal-footer">                    <a href="#!" class="modal-action                         modal-close btn green darken-1">                        Agree                    </a>                    <a href="#!" class="modal-action                         modal-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:HTMLHTML<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript"         src="https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body class="container ">    <div class="card-panel center">        <h3>Geeks for Geeks</h3>        <!-- Modal Trigger -->        <a class="waves-effect waves-light             btn green darken-1 modal-trigger"             href="#demo-modal">            Click Here!        </a>        <!-- Modal Structure -->        <div id="demo-modal" class="modal bottom-sheet">            <div class="modal-content">                <h4>Demo of Bottom sheet Modal</h4>                <p>                <div class="red-text">                    Content of the modal goes here. <br>                    Type information here. <br>                </div>                An array is a collection of items stored at                contiguous memory locations.                The idea is to store multiple items of the                same type together.                </p>            </div>            <div class="modal-footer">                <a href="#!" class=" modal-action                     modal-close waves-effect                    waves-green btn red">                    Close                </a>            </div>        </div>    </div>    <script>        $(document).ready(function () {            $('.modal').modal();        })    </script></body>  </html>        Output:
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:HTMLHTML<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript" src=        "https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body class="container ">    <div class="card-panel center">        <h3>Geeks for Geeks</h3>        <!-- Modal Trigger -->        <a class="waves-effect waves-light btn             green darken-1 modal-trigger"             href="#demo-modal">            Click Here!        </a>          <!-- Modal Structure -->        <div id="demo-modal" class="modal">            <div class="modal-content">                <h4>Demo of Simple Modal</h4>                <p>                <div class="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 Dennis                 Ritchie as a system programming language                 to write operating system. The main                 features of C language include low-level                access to memory, simple set of keywords,                and clean style, these features make C                 language suitable for system programming                 like operating system or compiler development.                </p>            </div>              <div class="modal-footer">                <a href="#!" class="modal-action                     modal-close waves-effect waves-green                     btn green lighten-1">                    Close                </a>            </div>        </div>    </div>    <script>        $(document).ready(function () {            $('.modal').modal();        }        )    </script></body>  </html>Output:
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>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript" src=        "https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body class="container ">    <div class="card-panel center">        <h3>Geeks for Geeks</h3>        <!-- Modal Trigger -->        <a class="waves-effect waves-light btn             green darken-1 modal-trigger"             href="#demo-modal">            Click Here!        </a>          <!-- Modal Structure -->        <div id="demo-modal" class="modal">            <div class="modal-content">                <h4>Demo of Simple Modal</h4>                <p>                <div class="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 Dennis                 Ritchie as a system programming language                 to write operating system. The main                 features of C language include low-level                access to memory, simple set of keywords,                and clean style, these features make C                 language suitable for system programming                 like operating system or compiler development.                </p>            </div>              <div class="modal-footer">                <a href="#!" class="modal-action                     modal-close waves-effect waves-green                     btn 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:HTMLHTML<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript" src=        "https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body>    <div class="container center">        <div class="card-panel">            <h3>Geeks for Geeks</h3>            <!-- Modal Trigger -->            <a class="waves-effect waves-light btn                 green darken-1 modal-trigger"                 href="#demo-modal-fixed-footer">                Click Here!            </a>              <!-- Modal Structure -->            <div id="demo-modal-fixed-footer"                 class="modal modal-fixed-footer">                <div class="modal-content">                    <h4>Modal with Fixed Footer</h4>                    <div class="red-text">                        Content of the modal goes here. <br>                        Type information here. <br>                    </div>                    <p class="center">                        An array is a collection of items                         stored at contiguous memory locations.<br>                        The idea is to store multiple items of                         the same type together.<br> This makes                         it easier to calculate the position<br>                        of each element by simply adding an                         offset to a base value,<br> i.e., the                         memory location of the first element of                        the array <br>(generally denoted by the                         name of the array).<br>                    </p>                      <p class="center">                        An array is a collection of items stored                         at contiguous memory locations.<br>                        The idea is to store multiple items of                         the same type together.<br>                        This makes it easier to calculate the                         position of each element <br>                        by simply adding an offset to a base                         value, i.e., the memory location of <br>                        the first element of the array (generally                         denoted by the name of the array).<br>                    </p>                </div>                <div class="modal-footer">                    <a href="#!" class="modal-action                         modal-close btn green darken-1">                        Agree                    </a>                    <a href="#!" class="modal-action                         modal-close btn red darken-1">                        Disagree                    </a>                </div>            </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>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript" src=        "https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body>    <div class="container center">        <div class="card-panel">            <h3>Geeks for Geeks</h3>            <!-- Modal Trigger -->            <a class="waves-effect waves-light btn                 green darken-1 modal-trigger"                 href="#demo-modal-fixed-footer">                Click Here!            </a>              <!-- Modal Structure -->            <div id="demo-modal-fixed-footer"                 class="modal modal-fixed-footer">                <div class="modal-content">                    <h4>Modal with Fixed Footer</h4>                    <div class="red-text">                        Content of the modal goes here. <br>                        Type information here. <br>                    </div>                    <p class="center">                        An array is a collection of items                         stored at contiguous memory locations.<br>                        The idea is to store multiple items of                         the same type together.<br> This makes                         it easier to calculate the position<br>                        of each element by simply adding an                         offset to a base value,<br> i.e., the                         memory location of the first element of                        the array <br>(generally denoted by the                         name of the array).<br>                    </p>                      <p class="center">                        An array is a collection of items stored                         at contiguous memory locations.<br>                        The idea is to store multiple items of                         the same type together.<br>                        This makes it easier to calculate the                         position of each element <br>                        by simply adding an offset to a base                         value, i.e., the memory location of <br>                        the first element of the array (generally                         denoted by the name of the array).<br>                    </p>                </div>                <div class="modal-footer">                    <a href="#!" class="modal-action                         modal-close btn green darken-1">                        Agree                    </a>                    <a href="#!" class="modal-action                         modal-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:HTMLHTML<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript"         src="https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body class="container ">    <div class="card-panel center">        <h3>Geeks for Geeks</h3>        <!-- Modal Trigger -->        <a class="waves-effect waves-light             btn green darken-1 modal-trigger"             href="#demo-modal">            Click Here!        </a>        <!-- Modal Structure -->        <div id="demo-modal" class="modal bottom-sheet">            <div class="modal-content">                <h4>Demo of Bottom sheet Modal</h4>                <p>                <div class="red-text">                    Content of the modal goes here. <br>                    Type information here. <br>                </div>                An array is a collection of items stored at                contiguous memory locations.                The idea is to store multiple items of the                same type together.                </p>            </div>            <div class="modal-footer">                <a href="#!" class=" modal-action                     modal-close waves-effect                    waves-green btn red">                    Close                </a>            </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>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <script type="text/javascript"         src="https://code.jquery.com/jquery-2.1.1.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">    </script></head>  <body class="container ">    <div class="card-panel center">        <h3>Geeks for Geeks</h3>        <!-- Modal Trigger -->        <a class="waves-effect waves-light             btn green darken-1 modal-trigger"             href="#demo-modal">            Click Here!        </a>        <!-- Modal Structure -->        <div id="demo-modal" class="modal bottom-sheet">            <div class="modal-content">                <h4>Demo of Bottom sheet Modal</h4>                <p>                <div class="red-text">                    Content of the modal goes here. <br>                    Type information here. <br>                </div>                An array is a collection of items stored at                contiguous memory locations.                The idea is to store multiple items of the                same type together.                </p>            </div>            <div class="modal-footer">                <a href="#!" class=" modal-action                     modal-close waves-effect                    waves-green btn red">                    Close                </a>            </div>        </div>    </div>    <script>        $(document).ready(function () {            $('.modal').modal();        })    </script></body>  </html>        
Output:
Materialize-CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript