The dialog box in MDUI is a very versatile component, often used to ask users for information, notify or warn users.
Only one dialog box is displayed at the same time. If the current dialog box is not closed before opening the next dialog box, then the next dialog box will be added to the queue and will be opened after the current dialog box is closed.
<divclass="mdui-dialog"><divclass="mdui-dialog-title">Are you sure?</div><divclass="mdui-dialog-content">You'll lose all photos and media!</div><divclass="mdui-dialog-actions"><buttonclass="mdui-btnmdui-ripple">cancel</button><buttonclass="mdui-btnmdui-ripple">erase</button></div></div>
The buttons at the bottom of the dialog box are arranged horizontally by default. Just in <div class="mdui-dialog-actions">&You can set the buttons to be arranged vertically.code> Add class .mdui-dialog-actions-stacked 即可将按钮设置为竖直排列。
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
<divclass="mdui-dialog"><divclass="mdui-dialog-title">Use Google's location service?</div><divclass="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div><divclass="mdui-dialog-actions mdui-dialog-actions-stacked"><buttonclass="mdui-btnmdui-ripple">turn on speed boost</button><buttonclass="mdui-btnmdui-ripple">no thanks</button></div></div>
Fixed title and button
When the content of the dialog box exceeds the height of the dialog box,.mdui-dialog-content The content in will generate scroll bars.
If
.mdui-dialog-title with .mdui-dialog-actions Put to .mdui-dialog-content internal,
The title and bottom buttons will scroll with the scroll bar; otherwise, the title and buttons will be fixed at the top and bottom, respectively, and will not scroll with the scroll bar.
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
<divclass="mdui-dialog"><divclass="mdui-dialog-content"><divclass="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><divclass="mdui-dialog-actions"><buttonclass="mdui-btnmdui-ripple">no thanks</button><buttonclass="mdui-btnmdui-ripple">turn on speeboost</button></div></div>
Custom content
Only in the dialog <div class="mdui-dialog"></div> Is required, the content in this element can be replaced with any HTML。
In the following example, a Tab tab is placed in the dialog box:
There is no need to write JavaScript code to use this method. Just in a controlling element（For example: button）Add on mdui-dialog="options" Attributes. When calling through custom attributes, you need to add an additionaltarget The parameter is used to specify the dialog box to be controlled, and its value is the CSS selector of the dialog box to be controlled.
<buttonclass="mdui-btn mdui-ripple mdui-color-theme-accent"mdui-dialog="{target: '#exampleDialog'}">open</button><divclass="mdui-dialog"id="exampleDialog"><divclass="mdui-dialog-title">Are you sure?</div><divclass="mdui-dialog-content">You'll lose all photos and media!</div><divclass="mdui-dialog-actions"><buttonclass="mdui-btn mdui-ripple"mdui-dialog-close>cancel</button><buttonclass="mdui-btn mdui-ripple"mdui-dialog-confirm>erase</button></div></div>
Some properties can be added to the elements in the dialog box to bind events, and these properties can also be used when calling with JavaScript.
Attributes
Description
mdui-dialog-close
Clicking on the element will trigger close.mdui.dialog Event and close the dialog box.
mdui-dialog-cancel
Clicking on the element will trigger cancel.mdui.dialog event.
mdui-dialog-confirm
Clicking on the element will trigger confirm.mdui.dialog event.
Call via JavaScript
Instantiate components:
// selector is the CSS selector or DOM element or HTML string of the dialog// options are configuration parameters, see the parameter list belowvar inst = new mdui.Dialog(selector, options);
Whether to show the mask when opening the dialog box.
history
boolean
true
Whether to add url hash when opening the dialog box, if it is true, the back button of the browser or the return key of Android can be used to close the dialog box after opening the dialog box.
modal
boolean
false
Whether to make the dialog box modal. When it is false, the dialog box will be closed when the area outside the dialog box is clicked, otherwise it will not be closed.
closeOnEsc
boolean
true
Whether to close the dialog box when pressing the Esc key.
closeOnCancel
boolean
true
Whether to close the dialog box when the cancel button is pressed.
closeOnConfirm
boolean
true
Whether to close the dialog box when the OK button is pressed.
destroyOnClosed
boolean
false
Whether to automatically destroy the dialog box after closing the dialog box.
method
Method name
description
open()
Open the dialog box.
close()
Close the dialog.
toggle()
Toggles the open state of the dialog box.
getState()
Get the status of the dialog box. Contains four states（opening、opened、closing、closed）。
destroy()
Destroy the dialog.
handleUpdate()
Readjust the position of the dialog box and the height of the scroll bar. After opening the dialog box, if you modify the contents of the dialog box, you need to call this method.
event
event
description
the goal
parameter
open.mdui.dialog
The event will be triggered when the dialog starts to open the animation.
<div class="mdui-dialog"></div>
event._detail.inst: Examples
opened.mdui.dialog
The event will be triggered when the dialog box ends to open the animation.
close.mdui.dialog
The event will be triggered when the dialog box starts to close the animation.
closed.mdui.dialog
The event will be triggered when the dialog box ends and closes the animation.
cancel.mdui.dialog
When the cancel button is pressed, the event will be triggered.
confirm.mdui.dialog
When the confirm button is pressed, the event will be triggered.
Predefined dialog
MDUI encapsulates several predefined dialog box functions for common scenarios. These predefined dialog boxes are only called by JavaScript without writing HTML code.
These functions all return dialog instances.
mdui.dialog()
Open a dialog box, the title, content, buttons, etc. can be customized. This method is more general, the latter mdui.alert()、mdui.confirm()、mdui.prompt() All are encapsulated using this method.
mdui.dialog({
title: 'title',
content: 'content',
buttons: [
{
text: 'cancel'
},
{
text: 'confirm',
onClick: function(inst){
mdui.alert('Click the callback of the confirm button');
}
}
]
});
parameter:
parameter name
Types of
Defaults
Description
title
string
The title of the dialog box.
content
string
The content of the dialog box.
buttons
array
An array of buttons, each button is an object with button parameters (see the table below).
stackedButtons
boolean
false
Whether the buttons are arranged vertically.
cssClass
string
add to .mdui-dialog CSS classes on the.
history
boolean
true
Whether to listen hashchange Event, when it is true, you can close the dialog by using Android's back key or the browser back button.
overlay
boolean
true
Whether to display the mask layer after opening the dialog box.
modal
boolean
false
Whether to make the dialog box modal. When it is false, the dialog box will be closed when the area outside the dialog box is clicked, otherwise it will not be closed.
closeOnEsc
boolean
true
Whether to close the dialog box when pressing the Esc key.
destroyOnClosed
boolean
true
Whether to automatically destroy the dialog box after closing the dialog box.
onOpen
function
Callback when opening animation starts. Parameters are instances of dialog boxes.
onOpened
function
Callback at the end of the opening animation. Parameters are instances of dialog boxes.
onClose
function
Close the callback when the animation starts. Parameters are instances of dialog boxes.
onClosed
function
Callback when closing animation ends. Parameters are instances of dialog boxes.
Parameters of the button:
parameter name
Types of
Defaults
Description
text
string
Button text.
bold
boolean
false
Whether the button text is bold.
close
boolean
true
Whether to close the dialog box after clicking the button.
onClick
function
The callback function for clicking the button.
mdui.alert()
Open an alert box, which can contain a title, content, and a confirmation button:
// Text only
mdui.alert('content');
// With title and text
mdui.alert('content', 'title');
// With callback
mdui.alert('content', 'title', function(){
mdui.alert('Clicked the confirm button');
});
// With text and callback
mdui.alert('content', function(){
mdui.alert('Clicked the confirm button');
});
text: text
title: (Optional) Title
onConfirm: (Optional) Click the callback of the confirm button. Parameters are instances of dialog boxes.
options: (Optional) Parameters, see the table below.
parameter name
Types of
Defaults
Description
confirmText
string
ok
The text of the confirm button.
history
boolean
true
Whether to listen hashchange Event, when it is true, you can close the dialog by using Android's back key or the browser back button.
modal
boolean
false
Whether to make the dialog box modal. When it is false, the dialog box will be closed when the area outside the dialog box is clicked, otherwise it will not be closed.
closeOnEsc
boolean
true
Whether to close the dialog box when pressing the Esc key.
mdui.confirm()
Open a confirmation box, which can contain a title, content, a confirmation button and a cancel button:
// With text and confirmation callback
mdui.confirm('content', function(){
mdui.alert('Clicked the confirm button');
});
// With text, confirm button and cancel button callback
mdui.confirm('content',
function(){
mdui.alert('Clicked the confirm button');
},
function(){
mdui.alert('Clicked the cancel button');
}
);
// Contains text, title and confirmation button callback
mdui.confirm('content', 'title', function(){
mdui.alert('Clicked the confirm button');
});
// Contains text, title confirmation button and cancel button callback
mdui.confirm('content', 'title',
function(){
mdui.alert('Clicked the confirm button');
},
function(){
mdui.alert('Clicked the cancel button');
}
);
text: text
title: (Optional) title
onConfirm: (Optional) Click the callback of the confirm button. The parameters are instances of dialog boxes.
onCancel: (Optional) Click the cancel button to call back. The parameters are instances of dialog boxes.
options: (Optional) Parameters, see the table below.
parameter name
Types of
Defaults
Description
confirmText
string
ok
The text of the confirm button.
cancelText
string
cancel
The text of the cancel button.
history
boolean
true
Whether to listen hashchange Event, when it is true, you can close the dialog by using Android's back key or the browser back button.
modal
boolean
false
Whether to make the dialog box modal. When it is false, the dialog box will be closed when the area outside the dialog box is clicked, otherwise it will not be closed.
closeOnEsc
boolean
true
Whether to close the dialog box when pressing the Esc key.
mdui.prompt()
Open a dialog box that prompts the user for input, which can contain a title, content, text box, a confirmation button, and a cancel button:
// Single line text box
mdui.prompt('This is a single line text box',
function (value) {
mdui.alert('You entered:' + value + ', Clicked the confirm button');
},
function (value) {
mdui.alert('You entered:' + value + ', Clicked the cancel button');
}
);
// Multiline text box
mdui.prompt('This is a multi-line text box',
function (value) {
mdui.alert('You entered:' + va, Clicked the confirm button');
},
function (value) {
mdui.alert('You entered:' + va, Clicked the cancel button');
},
{
type: 'textarea'
}
);
// With title
mdui.prompt('Please enter text', 'title',
function (value) {
mdui.alert('You entered:' + value + ', Clicked the confirm button');
},
function (value) {
mdui.alert('You entered:' + value + ', Clicked the cancel button');
}
);
label: The text of the floating label of the text box
title: (Optional) title
onConfirm: (Optional) Click the callback of the confirm button. Contains two parameters, namely the value of the text box and the instance of the dialog box.
onCancel: (Optional) Click the cancel button to call back. Contains two parameters, the value of the text box and the instance of the dialog box.
options: (Optional) Parameters, see the table below
parameter name
Types of
Defaults
Description
confirmText
string
ok
Confirm button text
cancelText
string
cancel
The text of the cancel button
history
boolean
true
Whether to listen hashchange Event, when it is true, you can close the dialog by using Android's back key or the browser back button.
modal
boolean
false
Whether to make the dialog box modal. When it is false, the dialog box will be closed when the area outside the dialog box is clicked, otherwise it will not be closed.
closeOnEsc
boolean
true
Whether to close the dialog box when pressing the Esc key.
confirmOnEnter
boolean
false
Fires when the Enter key is pressedonConfirm Callback.
type
string
text
The type of text box.
text: Single line text box
textarea: Multiline text box
maxlength
int
Maximum number of input characters
defaultValue
string
The default value of the text box
CSS List of class names
Class name
effect
.mdui-dialog
Define a dialog box component.
.mdui-dialog-title
Define the title of the dialog box.
.mdui-dialog-content
Define the content of the dialog box.
.mdui-dialog-actions
Define the action bar of the dialog box.
.mdui-dialog-actions-stacked
Arrange the buttons on the action bar of the dialog box vertically.