Dialog

Ask a question
Dialog has been deprecated and will be removed in a future version.

Summary

Modal dialog that displays additional functionality without leaving the current page.

Status

API status: general
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:ajs
AMD Module key: N/A
Experimental since: 1.0

Examples

Code

A simple Dialog may have just one page, with one panel, plus the usual header with heading text and a footer with buttons.

If multiple panels are added to a Dialog page, they will be shown one at a time with a vertical set of controls on the left (very similar to vertical nav or tabs).

Multi-step dialogs (eg. wizards) show multiple pages, accessed via buttons in the footer.

HTML

Create a trigger which will be used by the JavaScript:

Options

The Dialog API uses a Dialog object which can be instantiated as follows:

This alone will create a simple popup that closes if the user clicks outside the popup.

In most cases, further functionality is added using Dialog's various methods.

Methods

Function Arguments Description Example Usage
addHeader title, className adds a heading to the current page of the dialog
addButton label, onClickEvent, className adds a new button to the button panel of the dialog
addLink label, onClickEvent, className adds a new link to the button panel of the dialog
addSubmit label, onClickEvent adds a standard submit button to your dialog, you must specify the onClick action
addCancel   adds a standard cancel link to your dialog
addButtonPanel   adds a new button panel to the current page
addPanel title, selectorForContent (eg. jQuery selector), className adds a new panel to the current page of the dialog
addPage className adds a new page to the dialog
nextPage   goes to the next page in the dialog hierarchy
prevPage   goes to the previous page in the dialog hierarchy
gotoPage pageNumber goes to a specific page in the dialog hierarchy
getPanel pageorpanelID, panelID returns the desired panel object
getPage pageID returns the desired page object
getCurrentPanel   returns the current panel object
gotoPanel pageObject , panelIDorObject goes to a specific panel in the dialog hierarchy
show   shows the dialog
hide   hides the dialog
remove   removes the dialog
disable   disables the dialog making it unclickable and unresponsive
enable   enables the dialog if it is disabled
updateHeight   updates the height of a dialog if content is expanded so that scrollbars are not required

Event handlers

The addButton, addLink and addCancel methods accept an onclick handler function which is called when the link or button is clicked with the following arguments.

As of AUI version 3.4, omitting the return statement or returning false will prevent the default action of click events on this element. Returning true will allow the default action to proceed.

Events

As of AUI 3.5, events are thrown when a dialog is shown, hidden and removed. You can bind to the events:

  • show.dialog
  • hide.dialog
  • remove.dialog

For example: