Open Modal on page load easily in 3 easy steps

Dinesh Kumar R

3 years ago

Learn how to Open Modal on page load

In this tutorial, we will discuss how to create a modal that opens on the page load in Materialize CSS framework. In a presumption that you already have an idea to implement modal in your Materialize CSS project, we have written this tutorial. It is merely a baby step to create a modal in Materialize CSS, and we look forward to writing a tutorial on this shortly.
Now lets complete the task at hand. We are writing this tutorial with the JQuery version of Materialize CSS. As a first step, create a boilerplate template with Materialize CSS.
Following is the boilerplate template with JQuery. Here’s the link to the official Boilerplate Template and Modal Creation Documentation

<!DOCTYPE html>
  <html>
    <head>
  
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   
    </head>
    <body>

        
         <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"></script>

    </body>
</html>

The second step is to add the modal HTML code. Kindly copy-paste the following code inside the body tag.

<div id="modal1" class="modal" >
    <div class="modal-content center ">
     
    <h1>Hi</h1>
  </div>
        </div>

The third step is to add the following JQuery script just above the closing body tag. The following script not only helps in showing the modal on page load but also helps in creating the modal in the first place.

<script>
            $(document).ready(function(){
             
                  $('.modal').modal();
                 $('#modal1').modal('open');
                $('#cls').click(function(){
                    $('#modal1').modal('close');                   
                });
            });
        </script>

Open Materialize Modal on page load — Open Modal on page load

Et voila! Now we have a modal that opens on page load. You can customize the content inside the modal. Learn how to add Breadcrumbs in your Materialize CSS Projects