The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Dialog

In mdui, the dialog component is highly versatile and is commonly used to ask users for information, inform them, or warn them.

Only one dialog is displayed at a time. If another dialog is opened before the current one closes, it is queued and opened after the current one closes.

Usage

Call via Attributes
Call via JavaScript

Style

Standard Dialog

This is a standard dialog.

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

Without Title Bar

This dialog does not have a title bar.

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

Stacked Buttons

Buttons at the bottom of the dialog are horizontally aligned by default. Simply add the class .mdui-dialog-actions-stacked to <div class="mdui-dialog-actions"></div> to stack the buttons vertically.

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

Fixed Title and Buttons

When the dialog content exceeds the dialog height, a scrollbar will appear in .mdui-dialog-content.

If you place .mdui-dialog-title and .mdui-dialog-actions inside .mdui-dialog-content, the title and bottom buttons will scroll with the content; otherwise, the title and buttons will remain fixed at the top and bottom respectively and will not scroll.

Example

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

Custom Content

In a dialog, only <div class="mdui-dialog"></div> is required; the content inside this element can be replaced with any HTML.

In the example below, a tab is placed inside a dialog:

Example

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

Usage

Call via Attributes

With this approach, no JavaScript needs to be written. Simply add the mdui-dialog="options" attribute to a control element (for example, a button). When using this custom-attribute approach, an additional target parameter is required to specify the dialog to be controlled; its value should be the CSS selector of the target dialog.

Example

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

You can add attributes to elements inside the dialog to bind events, which also work when calling via JavaScript.

Attribute	Description
`mdui-dialog-close`	Clicking this element will trigger the `close.mdui.dialog` event and close the dialog.
`mdui-dialog-cancel`	Clicking this element will trigger the `cancel.mdui.dialog` event.
`mdui-dialog-confirm`	Clicking this element will trigger the `confirm.mdui.dialog` event.

Call via JavaScript

Instantiate component:

// selector is the CSS selector, DOM element, or HTML string of the dialog
// options is the configuration parameters, see the parameter list below
var inst = new mdui.Dialog(selector, options);

Run

Param

Param Name	Type	Default	Description
`overlay`	`boolean`	`true`	Whether to show an overlay when the dialog is opened.
`history`	`boolean`	`true`	Whether to add a URL hash when the dialog is opened. If true, the dialog can be closed via the browser's back button or the back button on Android after it is opened.
`modal`	`boolean`	`false`	Whether to make the dialog modal. If false, clicking the area outside the dialog will close it; otherwise, it will not close.
`closeOnEsc`	`boolean`	`true`	Whether to close the dialog when the Esc key is pressed.
`closeOnCancel`	`boolean`	`true`	Whether to close the dialog when the cancel button is pressed.
`closeOnConfirm`	`boolean`	`true`	Whether to close the dialog when the confirm button is pressed.
`destroyOnClosed`	`boolean`	`false`	Whether to automatically destroy the dialog after it is closed.

Method

Method Name	Description
`open()`	Open the dialog.
`close()`	Close the dialog.
`toggle()`	Toggle the open state of the dialog.
`getState()`	Get the state of the dialog. Contains four states (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Destroy the dialog.
`handleUpdate()`	Readjust the dialog position and scrollbar height. If the dialog content is modified after the dialog is opened, this method should be called.

Event

Event Name	Description	Target	Params
`open.mdui.dialog`	The event will be triggered when the dialog starts its opening animation.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: Instance
`opened.mdui.dialog`	The event will be triggered when the dialog finishes its opening animation.
`close.mdui.dialog`	The event will be triggered when the dialog starts its closing animation.
`closed.mdui.dialog`	The event will be triggered when the dialog finishes its closing animation.
`cancel.mdui.dialog`	The event will be triggered when the cancel button is pressed.
`confirm.mdui.dialog`	The event will be triggered when the confirm button is pressed.

Predefined Dialogs

mdui has encapsulated several predefined dialog functions for common scenarios. These predefined dialogs are called only through JavaScript and do not require writing HTML code.

These functions all return an instance of the dialog.

mdui.dialog()

Opens a dialog where the title, content, buttons, and so on can all be customized. This method is generic, and mdui.alert(), mdui.confirm(), and mdui.prompt() are all implemented through it.

mdui.dialog(options)

Example

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Cancel'
    },
    {
      text: 'Confirm',
      onClick: function(inst){
        mdui.alert('Callback for clicking the confirm button');
      }
    }
  ]
});

Param

Param Name	Type	Default	Description
`title`	`string`		The title of the dialog.
`content`	`string`		The content of the dialog.
`buttons`	`array`		An array of buttons, where each button is an object with button parameters (see the table below).
`stackedButtons`	`boolean`	`false`	Whether buttons are stacked vertically.
`cssClass`	`string`		CSS classes added to `.mdui-dialog`.
`history`	`boolean`	`true`	Whether to listen to the `hashchange` event. If true, the dialog can be closed via the back button on Android or the browser's back button.
`overlay`	`boolean`	`true`	Whether to show an overlay after the dialog is opened.
`modal`	`boolean`	`false`	Whether to make the dialog modal. If false, clicking the area outside the dialog will close it; otherwise, it will not close.
`closeOnEsc`	`boolean`	`true`	Whether to close the dialog when the Esc key is pressed.
`destroyOnClosed`	`boolean`	`true`	Whether to automatically destroy the dialog after it is closed.
`onOpen`	`function`		Callback when the opening animation starts. The argument is the instance of the dialog.
`onOpened`	`function`		Callback when the opening animation ends. The argument is the instance of the dialog.
`onClose`	`function`		Callback when the closing animation starts. The argument is the instance of the dialog.
`onClosed`	`function`		Callback when the closing animation ends. The argument is the instance of the dialog.

Button parameters:

Param Name	Type	Default	Description
`text`	`string`		Button text.
`bold`	`boolean`	`false`	Whether the button text is bold.
`close`	`boolean`	`true`	Whether to close the dialog after the button is clicked.
`onClick`	`function`		Callback function when the button is clicked.

mdui.alert()

Opens an alert box, which can contain a title, content, and a confirm button:

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

Example

// Text only
mdui.alert('content');

// Includes title and text
mdui.alert('content', 'title');

// Includes callback
mdui.alert('content', 'title', function() {
  mdui.alert('Confirm button clicked');
});

// Includes text and callback
mdui.alert('content', function() {
  mdui.alert('Confirm button clicked');
});

text: text
title: (Optional) title
onConfirm: (Optional) callback for clicking the confirm button. The argument is the instance of the dialog.
options: (Optional) parameters, see the table below.

Param Name	Type	Default	Description
`confirmText`	`string`	`ok`	Text of the confirm button.
`history`	`boolean`	`true`	Whether to listen to the `hashchange` event. If true, the dialog can be closed via the back button on Android or the browser's back button.
`modal`	`boolean`	`false`	Whether to make the dialog modal. If false, clicking the area outside the dialog will close it; otherwise, it will not close.
`closeOnEsc`	`boolean`	`true`	Whether to close the dialog when the Esc key is pressed.
`closeOnConfirm`	`boolean`	`true`	Whether to close the dialog when the confirm button is pressed.

mdui.confirm()

Opens a confirm box, which can contain a title, content, a confirm button, and a cancel button:

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

Example

// Includes text and confirm callback
mdui.confirm('content', function(){
  mdui.alert('Confirm button clicked');
});

// Includes text, confirm, and cancel button callbacks
mdui.confirm('content',
  function(){
    mdui.alert('Confirm button clicked');
  },
  function(){
    mdui.alert('Cancel button clicked');
  }
);

// Includes text, title, and confirm button callback
mdui.confirm('content', 'title', function(){
  mdui.alert('Confirm button clicked');
});

// Includes text, title, confirm button, and cancel button callbacks
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Confirm button clicked');
  },
  function(){
    mdui.alert('Cancel button clicked');
  }
);

text: text
title: (Optional) title
onConfirm: (Optional) callback for clicking the confirm button. The argument is the instance of the dialog.
onCancel: (Optional) callback for clicking the cancel button. The argument is the instance of the dialog.
options: (Optional) parameters, see the table below.

Param Name	Type	Default	Description
`confirmText`	`string`	`ok`	Text of the confirm button.
`cancelText`	`string`	`cancel`	Text of the cancel button.
`history`	`boolean`	`true`	Whether to listen to the `hashchange` event. If true, the dialog can be closed via the back button on Android or the browser's back button.
`modal`	`boolean`	`false`	Whether to make the dialog modal. If false, clicking the area outside the dialog will close it; otherwise, it will not close.
`closeOnEsc`	`boolean`	`true`	Whether to close the dialog when the Esc key is pressed.
`closeOnCancel`	`boolean`	`true`	Whether to close the dialog when the cancel button is pressed.
`closeOnConfirm`	`boolean`	`true`	Whether to close the dialog when the confirm button is pressed.

mdui.prompt()

Opens a dialog that prompts the user for input, which can contain a title, content, a text field, a confirm button, and a cancel button:

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

Example

// Single-line text field
mdui.prompt('This is a single-line text field',
  function (value) {
    mdui.alert('You entered:' + value + ', Confirm button clicked');
  },
  function (value) {
    mdui.alert('You entered:' + value + ', Cancel button clicked');
  }
);

// Multi-line text field
mdui.prompt('This is a multi-line text field',
  function (value) {
    mdui.alert('You entered:' + value + ', Confirm button clicked');
  },
  function (value) {
    mdui.alert('You entered:' + value + ', Cancel button clicked');
  },
  {
    type: 'textarea'
  }
);

// Includes title
mdui.prompt('Please enter text', 'title',
  function (value) {
    mdui.alert('You entered:' + value + ', Confirm button clicked');
  },
  function (value) {
    mdui.alert('You entered:' + value + ', Cancel button clicked');
  }
);

label: text of the floating label for the text field
title: (Optional) title
onConfirm: (Optional) callback for clicking the confirm button. Includes two parameters: the value of the text field and the instance of the dialog.
onCancel: (Optional) callback for clicking the cancel button. Includes two parameters: the value of the text field and the instance of the dialog.
options: (Optional) parameters, see the table below

Param Name	Type	Default	Description
`confirmText`	`string`	`ok`	Text of the confirm button
`cancelText`	`string`	`cancel`	Text of the cancel button
`history`	`boolean`	`true`	Whether to listen to the `hashchange` event. If true, the dialog can be closed via the back button on Android or the browser's back button.
`modal`	`boolean`	`false`	Whether to make the dialog modal. If false, clicking the area outside the dialog will close it; otherwise, it will not close.
`closeOnEsc`	`boolean`	`true`	Whether to close the dialog when the Esc key is pressed.
`closeOnCancel`	`boolean`	`true`	Whether to close the dialog when the cancel button is pressed
`closeOnConfirm`	`boolean`	`true`	Whether to close the dialog when the confirm button is pressed
`confirmOnEnter`	`boolean`	`false`	Triggers the `onConfirm` callback function when the Enter key is pressed.
`type`	`string`	`text`	Type of the text field. `text`: single-line text field `textarea`: multi-line text field
`maxlength`	`int`	`0`	Maximum number of input characters
`defaultValue`	`string`	`''`	Default value of the text field

CSS Classes

Class Name	Description
`.mdui-dialog`	Defines a dialog component.
`.mdui-dialog-title`	Defines the title of the dialog.
`.mdui-dialog-content`	Defines the content of the dialog.
`.mdui-dialog-actions`	Defines the action bar of the dialog.
`.mdui-dialog-actions-stacked`	Stacks the buttons in the dialog action bar vertically.

Table

Dialog

Usage

Related Reading

Style

Standard Dialog

Without Title Bar

Stacked Buttons

Fixed Title and Buttons

Custom Content

Usage

Call via Attributes

Call via JavaScript

Param

Method

Event

Predefined Dialogs

mdui.dialog()

mdui.alert()

mdui.confirm()

mdui.prompt()

CSS Classes