v3.x Documentation

dialogSettings

A global object which includes default values and behaviors for the dialog boxes. It contains the following properties (all strings):

Property	Default value	Description
defType	"alert"	Default type of dialog box. Possible values are "alert", "prompt" and "confirm".
defTitle	"Message"	Default title for the dialog boxes.
defContent	"Missing text"	Default message for the dialog boxes.
okText	"OK"	Label for the ok button.
continueText	"Continue"	Label for the continue button.
cancelText	"Cancel"	Label for the cancel button.

dialog(options) ⇒ Promise.<Object>

Main function to display the dialog box.

options is an optional argument, an object containing the following optional properties:

Property	Type	Description
type	string	Type of dialog box. Possible values are "alert", "prompt" or "confirm".
title	string	Title of the dialog. HTML is not supported.
content	string	Message of the dialog. HTML is not supported, but whitespaces are preserved.
placeholder	string	On a prompt dialog, this will be a placeholder text for the input box.
id	string	An identifier that will be referenced in the Promise resolved object.
data	Object	Reference to a status object that will be referenced in the Promise resolved object.

The returned Promise resolves, after the dialog box is closed, to an object containing the following properties:

Property	Type	Description
action	boolean	true if the user has pressed ok or continue, false for cancel.
value	string	Value of the prompt input box. If the dialog box requested was not a prompt dialog it's set to undefined.
id	string	Same identifier passed when calling the dialog() function.
data	Object	Same object reference passed when calling the dialog() function. Useful to memorize data between subsequent dialogs.

Examples

Changing dialogSettings may be useful to localize the dialog box. For example, this snippet will show a confirm dialog with content in Italian, when calling dialog() with no arguments:

dialogSettings = {
    defType: "confirm",
    defTitle: "Conferma",
    defContent: "Contenuto non impostato",
    okText: "Accetta",
    continueText: "Continua",
    cancelText: "Annulla"
};

// Show the default dialog
dialog();

This is an example of standard usage:

dialog({
    type: "prompt",
    title: "Example",
    content: "What's your name?",
});

An example with some chaining and data carrying:

// 1st dialog box
dialog({
    type: "prompt",
    title: "Example",
    content: "What's your name?",
    id: "first",
    data: {foo: "bar"}
})
.then(function(box1) {
    if (box1.action) {
        // save name in `data`
        box1.data.name = box1.value != "" ? box1.value : "Unnamed";
        // 2nd dialog box
        return dialog({
            type: "confirm",
            content: "Do you want to have your name printed on a message?",
            data: box1.data,
        })
    }
})
.then(function(box2) {
    if (box2 && box2.action) {
        // 3rd dialog box
        dialog({
            // default type is alert, so we don't need to specify it
            title: "Print out",
            content: "Hello " + box2.data.name + "\nFoo: " + box2.data.foo
        });
    }
});

Live demo

The three examples reported on this documentation are available live here.