VOOZH about

URL: https://www.geeksforgeeks.org/css/explain-dialogs-in-materialize-css/

⇱ Explain Dialogs in Materialize CSS - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Explain Dialogs in Materialize CSS

Last Updated : 23 Jul, 2025

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.

Output:

👁 Image
Comment
Article Tags: