monster.ui.dialog()

The monster.ui.dialog() method generates a dialog window with the look and feel of Monster UI.

Syntax

monster.ui.dialog([content, options]);

Parameters

KeyDescriptionTypeDefaultRequired
contentEither a string representation or a jQuery object that will be inserted inside the dialog widget.String, jQuerytrue
optionsLet you customize the look and feel of the dialog in Monster UI. Besides that, you can override the default options that can be found on the jQuery UI Dialog Widget page. The only options that cannot be overridden are appendTo, draggable, resizable, show, hide, position, minHeight, minWidth, zIndex and the close method.Object(#options)false

options

Here is a list of the customization settings specific to Monster UI.

KeyDescriptionTypeDefaultRequired
autoScrollWhether or not to allow the dialog content to be scrollable.Booleantruefalse
dialogTypeType of dialog, which determines the closing button style.`String(‘conference''classic’)`classic
isPersistentWhether or not to keep the dialog open when another app is loaded.Booleanfalsefalse
onCloseA function to be executed when the dialog is closed.Functionfalse

Return

A jQuery object representing the dialog widget.

Description

The dialog widget generated by the monster.ui.dialog() method contains a bar with a title and an x icon on the top right to close it. The section below the title bar is were the HTML template, specified as the content parameter, will be rendered.

This method use the jQuery UI Dialog Widget to generate the dialog widget and then applies CSS styles specific to Monster UI.

The dialog is centered horizontally, and positioned at 1.5rem from top. It’s maximum dimensions, both horizontal and vertical, are 100% - 3rem. If the dialog’s content exceeds that size, it is automatically overflown.

Examples

Create a dialog widget

var template = $(app.getTemplate({
  name: 'dialog-failover'
}));

monster.ui.dialog(template, {
    title: app.i18n.active().dialog.failover.title,
    width: '540px',
    onClose: function() {
      doStuff();
    }
});

Image showing a simple Monster-UI popup

As shown in the example above, the method only generates the part inside the red rectangle and the template’s container.

On this page