Material Design Lite – Dialogs

Material Design Lite – Dialogs : The Material Design Lite (MDL) dialog component allows us to perform the action such as user action verification, input data and alerts box to provide extra information to users. Here in this tutorial we are going to explain how you can Material design lite dialogs. You can use our online editor to edit and run the code online.

Material Design Lite – Dialogs | Popup | Modal | Alert Box | Example

Sytax for Dialogs is as below-

Syntax –

Material Design Lite Dialog | Modal | Alert Syntax

The above syntax is used to create basic modal, alert box in Material design lite.

Now let us create a simple example to understand the basic dialog in Material Design Lite.


MDL Dialogs | Modal | Alert Box | Example

Try it »

If you run the above example it will produce the output something like this –

Material Design Lite – Dialogs

Mdl Dialog Classes

  • mdl-dialog : This is used to define the container of the dialog component.
  • mdl-dialog__title : This is used to define the title container in the dialog.
  • mdl-dialog__content : This is used to define the content container of the dialog.

  • mdl-dialog__actions : This is used to define the actions container in the dialog.

  • mdl-dialog__actions–full-width : This Modifies the actions to make the full width of the container and it makes each to take their own line.

More Examples

Let’s have look over more example and demo here.

Material Design Lite Alert Box

Material Design Lite Alert Box Popup

Try it »

Material Design Lite Confirm Box

Material Design Lite Confirmation Box Popup

Try it »