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
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();
    }
});

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