Materialize CSS Dialog Box
Materialize CSS Dialog Box
Due to Materialize’s built-in responsive design, websites built with it automatically resize to suit different device types. Materialize classes were developed to enable websites to adapt to any screen size. Websites built with Materialize can be accessed on all PCs, tablets, and mobile devices.
Materialize is designed to be flat and minimalist. It’s built on the principle that adding new CSS rules is far simpler than changing existing ones. Both shadows and vivid hues are supported. Tints and tones are consistent across all platforms and devices. Perhaps best of all, it’s completely free to use.
In this post, we’ll discuss dialog boxes in Materialize CSS.
What is Materialize CSS
Materialize CSS is a framework that uses CSS, JavaScript, and
It’s open source and requires the jQuery JavaScript library to work. It can be used to build reusable web components that are cross-browser compatible. Includes cards, tabs, navigation bars, toasts, and more for enhanced customization. It offers updated variations of typical user interface elements like buttons, checkboxes, and text fields, modified to adhere to Material Design principles.
What is a Dialog
A dialog is a graphical control element that appears as a small window to convey information to the user and also requests a response.
Dialog boxes are classified as either “modal” or “modeless,” depending on whether they prevent communication with the software that opened the dialog box. The required user interaction determines the type of dialog box that will be displayed.
The HTML element “dialog” represents a dialog box or other interactive element, such as a child window, inspector, or dismissible alert.
Dialog Boxes in Materialize CSS
Dialog boxes in Materialize CSS allow users to access additional information on demand. This information may not be immediately displayed on the website. At that particular moment, the information needed relates to a dialog transition. Materialize provides several options for displaying dialogs. Dialogs are snippets of Material that are normally hidden on the page but pop up to provide more information when needed. Users shouldn’t be surprised by these changes; they should be reasonable in terms of the dialog’s appearance. Toasts in Materialize provide a simple way to provide discreet reminders to your users. You can test the responsiveness and size of these toasts on different device sizes by clicking the button below.
To achieve this, programmatically call the Materialize.toast() function using JavaScript code. An HTML string can also be provided as the first argument. Once the toast is dismissed, you can have it call back a function. You can easily add custom CSS classes to the toast as optional arguments.
Syntax
Materialize.toast(content, timeDuration, class, callback);
Parameters
- Content – Specifies the content to be displayed on the user’s screen.
-
timeDuration – Specifies the length of time the information remains on the screen.
-
Class – Specifies the type of style class to apply to the toast.
-
callback – Specifies the callback method to be called after the toast is dismissed.
The following Materialize and CDN links need to be written in the <head> tag —
<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>
<script type = “text/<code class="language-markup line-numbers"><link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”> data-internallinksmanager029f6b8e52c="54" href="https://geek-docs.com/javascript/javascript-top-tutorials/1001100_javascript_index.html" rel="noopener" target="_blank" title="JavaScript Tutorial">javascript" src = "https://code.jquery.com/jquery2.1.1.min.js"> </script>
<script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”> </script>
Example
The following example demonstrates how to use Materialize CSS to add different types of dialog boxes to a web page.
<!DOCTYPE html>
<html>
<head>
<title> Dialogs in Materialize CSS </title>
<meta name= "viewport" content= "width = device-width, initial-scale = 1">
<link rel= "stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons">
<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 Box1(content, timeDuration) {
Materialize.toast( '<b>' + content + '</b>', timeDuration, 'rounded' );
}
function Box2(content, timeDuration) {
Materialize.toast('<em>' + content + '</em>', timeDuration );
}
function Box3(content, timeDuration) {
Materialize.toast( '<u>' + content + '<u>', timeDuration );
}
</script>
</head>
<body class="container">
<h2 style= "textalign:center"> Materialize CSS </h2>
<h4> Different Dialog boxes </h4>
Bold And rounded Alert box!! <br> <br>
Emphasized Alert box!! <br> <br>
Underlined Alert box!! <br> <br>
</body>
</html>
Clicking the Bold and Round Toast buttons displays a round toast with bold text. Clicking the Emphasize Toast button displays a rectangular toast with emphasized text. Clicking the Underline Toast button displays an underlined rectangular toast.
Summary
In this article, we used Materialize CSS to create dialog boxes. We also learned about the Materialize toast() function, which allows us to create custom toasts. We also learned some JavaScript concepts, such as the onclick() function.