Skip to content

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#

Key Description Type Default Required
content Either a string representation or a jQuery object that will be inserted inside the dialog widget. String, jQuery true
options Let 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.

Key Description Type Default Required
autoScroll Whether or not to allow the dialog content to be scrollable. Boolean true false
dialogType Type of dialog, which determines the closing button style. String('conference' | 'classic') classic false
isPersistent Whether or not to keep the dialog open when another app is loaded. Boolean false false
onClose A function to be executed when the dialog is closed. Function false

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.