Modal dialog that displays additional functionality without leaving the current page.
| 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 |
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.
Create a trigger which will be used by the JavaScript:
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.
| 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 |
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.
As of AUI 3.5, events are thrown when a dialog is shown, hidden and removed. You can bind to the events:
For example: