The Dialog plugin, lets you to show alerts, acknowledgement or dialog box/popup window, that inform the user about a situation.
To add dialog to your web app, you’ll need to download dialog plugin and add the js and css to your web app.
The following example shows how to create a basic dialog.
You can trigger the dialog using a button or a link.
You need to add the two data-* attributes:
<button class="md-button md-button--primary" data-toggle=”dialog” data-target=”#myDialog” > Toggle Dialog </button>data-toggle=”dialog”data-target=”#myDialog”We used BEM methodology to construct CSS class-names so that, they become consistent, isolated, and expressive.
<div class="md-dialog" id=”myDialog” > ... </div>
class="md-dialog" is identifying the content of the
<div><div class="md-dialog__shadow" ></div><div class="md-dialog__surface" > ... </div>There are two types of buttons used to perform user action and get the user's response for the same.
<button class="md-button" data-action=”affirmative” > ... </button><button class="md-button" data-action=”dismissive” > ... </button>
Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation.
Full-screen dialogs enable complex layouts, minimize the appearance of stacked sheets of material (dialogs above dialogs), and temporarily reset the app’s perceived elevation to a higher baseline. They allow tasks to launch simple menus or simple dialogs as part of a complex operation.(as per material design guidelines)