Explain Dialogs in Materialize CSS

Last Updated : 07 Oct, 2021

Dialogs in Materialize CSS provide users additional information to users if needed by them. These are directly not visible on the web-page. The dialog transitions are related to the information that is required at that point of time. Materialize provides various methods to show dialogs.

Syntax:

Materialize.toast(string, time, styleClass,callback);

Parameters:

string: It is the string that needs to be displayed in the dialog.
time: It is the time for what message string would be shown.
style class: This is to add various styles.
callback: This callback is a method to be called once the toast is discharged.

Linked Files: Include materialize and jQuery CDN into the <head> tag before all other stylesheets to load our CSS and JavaScript.

<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>
<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.97.3/js/materialize.min.js”></script>

Example: The below example shows the implementation of dialogs in Materialize CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
    <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.97.3/js/materialize.min.js"> 
    </script> 
  
    <script> 
        function Toast1(string, timeLength) { 
            Materialize.toast( 
                '<em>' + string + '</em>', timeLength 
            ); 
        } 
        function Toast2(string, timeLength) { 
            Materialize.toast( 
                '<b>' + string + '</b>', timeLength, 'rounded' 
            ); 
        } 
        function Toast3(string, timeLength) { 
            Materialize.toast( 
                '<u>' + string + '<u>', timeLength 
            ); 
        } 
    </script> 
</head> 
  
<body> 
    <body class="container"> 
        <h4>Toasts</h4> 
        <a class="btn" onclick= 
            "Toast1('Emphasized Alert!', 1500)"> 
            Emphasized Alert!! 
        </a><br><br> 
  
        <a class="btn" onclick= 
            "Toast2('Bold N rounded Alert!', 1500)"> 
            Bold N rounded Alert!! 
        </a><br><br> 
  
        <a class="btn" onclick= 
            "Toast3('Underlined Alert!', 1500)"> 
            Underlined Alert!! 
        </a><br><br> 
    </body> 
</body> 
  
</html> 