Dialog

Dialog is a UI widget for displaying both modal and non-modal dialog boxes.

Learn more about the Dialog plugin.

constructor

constructor(options: Dialog.Options);

The ui.Dialog constructor accepts several parameters:

width

[optional] The width of the dialog in pixels.

title

[optional] The title of the dialog.

content

[optional] The content of the dialog. It can be a string, HTML, or even a DOM element.

type

[optional] The type of the dialog. This effectively sets a CSS class on the dialog HTML container. The predefined dialog types are: 'info', 'alert', 'warning', 'success', and 'neutral'.

buttons

[optional] Buttons of the dialog. buttons is an array of objects of the form { action: String, content: String [, position: String] }.

action

[optional] The name of the action the button represents. When the button is clicked, the dialog object triggers an event action:[name], allowing you to react.

content

[optional] The label of the button (it can be HTML, as well).

position

[optional] It can be 'left', 'right', or 'center'. If position is not specified, it is considered to be 'right'. If multiple buttons are provided with the same position, they are placed left-to-right according to the order in which they were provided.

draggable

[optional] If draggable is true, the dialog window will be draggable by the user. It defaults to false.

closeButton

[optional] If closeButton is false, the dialog window will not display the default "cross" button in the top right corner allowing the user to close the dialog. It defaults to true.

closeButtonContent

[optional] The HTML content of the little close button in the top right corner of the dialog window. It defaults to a "cross" (x).

modal

[optional] If false, the dialog window will not be made modal. In other words, the user will still be able to interact with other elements on the page. It defaults to true.

inlined

[optional] If true, the dialog window will be inlined in a container that you can pass to the open() method.

Methods

open()

dialog.open(el?: mvc.$HTMLElement): this;

Open the dialog window.

close()

dialog.close(): this;

Close the dialog window.

on()

dialog.on(eventName: string, callback: EventHandler, context?: any): this;

Register a handler function that will be called whenever eventName is triggered. The optional context is an object that will be the context of the handler function (the this).

Events

The Dialog object triggers events when the user clicks one of its buttons. Events can be handled by using the on() method.

action:[name]

Triggered when the user clicks a button in the dialog with action named [name].

close

Triggered when the dialog gets closed.

Types

Options

interface Options extends mvc.ViewOptions<undefined> {
    draggable?: boolean;
    closeButtonContent?: mvc.$HTMLElement;
    closeButton?: boolean;
    inlined?: boolean;
    modal?: boolean;
    width?: number | string;
    title?: string;
    buttons?: Array<{
        content?: mvc.$HTMLElement;
        position?: string;
        action?: string;
    }>;
    type?: string;
    content?: mvc.$HTMLElement;
}