The dialog container exists on every page in Zenoss; it's a DIV with the id 'dialog'. Loading a dialog comprises 1) Fetching (via an XHR) HTML to display inside the dialog container, and 2) Showing the dialog container. These can be accomplished by calling the show() method on the dialog container, passing the event and a URL that will return the contents:

    $('dialog').show(this.event, 'dialog_MyDialog')

The dialog can then be hidden with, predictably, $('dialog').hide(). Since dialogs are almost always loaded via clicking on a menu item, menu items whose isdialog attribute is True will generate the javascript to show the dialog automatically. See the "Menus" section of this guide for more information.'

As for the dialog box contents themselves, any valid HTML will do, but certain conventions exist. Dialogs should have a header:

      <h2>Perform Action</h2>

Dialogs should also provide a cancel button:

    <input id="dialog_cancel" type="button" value="Cancel"
           onclick="$('dialog').hide()"/>

The main wrinkle with dialogs occurs in the area of form submission. Some dialogs are self-contained, and can carry their own form that is created and submitted just like any other form. Other dialogs, however, submit forms that exist elsewhere on the page -- for example, dialogs that perform actions against multiple rows checked in a table. These dialogs may use the submit_form method on the dialog container, which submits the form surrounding the menu item that caused the dialog to be loaded to the url passed in to the method. Thus for a table surrounded by a <form> and containing several checkboxes, dialogs loaded by menu items in the table's menu may submit the table's form to a url by providing a button:

    <input type="submit" name="doAction:method" value="Do It"
        tal:attributes="onclick string:
            $('dialog').submit_form('${here/absolute_url_path}')"/>

See the section on "Zope Templates" for more information about tal:attributes and the "${here/absolute_url_path}" syntax.

Finally, dialogs that create objects should validate the desired id before submitting. A method on the dialog container called submit_form_and_check(), which accepts the same parameter as submit_form() (URL), will do this. It requires:

For example, a generic object creation dialog:

    <h2>Create Object</h2>
    <span id="errmsg" style="color:red;"></span>
    <br/>
    <span>ID: </span>
    <input id="new_id" name="id"/>
    <input type="hidden" id="checkValidIdPath"
           tal:attributes="value here/getPrimaryUrlPath"/>
    <br/>
    <input tal:attributes="onclick string:
        return $$('dialog').submit_form_and_check('${here/getPrimaryUrlPath}')"
        id="dialog_submit"
        type="submit"
        value="Create"
        name="createObject:method"/>
    <input id="dialog_cancel" type="button" value="Cancel"
           onclick="$('dialog').hide()"/>

These examples will cover most cases; generally, a good idea is to look at other dialog templates that contain similar elements or perform similar actions.