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.
<!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>
Output:
