Material Design Lite – Dialogs

admin

8 years ago

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

<dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Dialog Title</h4>
    <div class="mdl-dialog__content">
      <p>
        Content goes here....
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Action Button</button>
      <button type="button" class="mdl-button close">Close Button</button>
    </div>
  </dialog>

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.

Example

MDL Dialogs | Modal | Alert Box | Example







  <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Delete this</h4>
    <div class="mdl-dialog__content">
      <p>
        Do you really want to delete this??
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Yes</button>
      <button type="button" class="mdl-button close">No</button>
    </div>
  </dialog>

Try it »

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

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


  <button id="show-dialog" type="button" class="mdl-button">Show Alert</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Alert</h4>
    <div class="mdl-dialog__content">
      <p>
        Please Enter Correct Name.
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button close">Ok</button>
    </div>
  </dialog>

Try it »

Material Design Lite Confirm Box

Material Design Lite Confirmation Box Popup


  <button id="show-dialog" type="button" class="mdl-button">Show Confirmation Box</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Confirm</h4>
    <div class="mdl-dialog__content">
      <p>
        If You delete your messages it can't be undone. Please Confirm to Proceed?
      </p>
    </div>
    <div class="mdl-dialog__actions">
	  <button type="button" class="mdl-button">Confirm</button>
      <button type="button" class="mdl-button close">Cancel</button>
    </div>
  </dialog>

Try it »