Skip to content


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


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


content: jQuery object (optional)#

HTML template that will be inserted inside the dialog window. If this parameter is omitted, an empty dialog window will be generated.

options: Object (optional)#

Let you override default options that can be found on the jQuery UI Dialog Widget page. The only options that cannot be overridden are show, hide and the close method.


This method returns the generated dialog window as a jQuery object.


The dialog window 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 window and then applies CSS styles specific to Monster UI.


  • Create a dialog window
    var template = $(monster.template(self, 'dialog-failover'));
    monster.ui.dialog(template, {
        width: '540px'

First create a template, preferably using the built-in Monster template generator by indicating the name of the template to build. Then call the monster.ui.dialog() method with the template and a number of options if wanted.

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.