Modal dialog that displays additional functionality without leaving the current page.
| API status: | deprecated |
|---|---|
| Included in AUI core? | Yes. You do not need to explicitly require the web resource key. |
| Web resource key: |
com.atlassian.auiplugin:dialog
|
| AMD Module key: | N/A |
| Experimental API: | 1 |
| General API: | 1.1 |
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:
// Standard sizes are 400, 600, 800 and 960 pixels widevar dialog = new AJS.Dialog({ width: 800, height: 500, id: "example-dialog", closeOnOutsideClick: true});// PAGE 0 (first page)// adds header for first pagedialog.addHeader("Dialog");// add panel 1dialog.addPanel("Panel 1", "<p>Some content for panel 1.</p>", "panel-body");// You can remove padding with:// dialog.get("panel:0").setPadding(0);// add panel 2 (this will create a menu on the left side for selecting panels within page 0)dialog.addPanel("Panel 2", '<p>Some content for panel 2.</p>' + '<div style="height: 2000px;">(forced-height element to demonstrate scrolling content)</div>' + '<p>End.</p>', 'panel-body');dialog.addButton("Next", function (dialog) { dialog.nextPage();});dialog.addLink("Cancel", function (dialog) { dialog.hide();}, "#");// PAGE 1 (second page)// adds a new page to dialogdialog.addPage();// adds header for second pagedialog.addHeader("Dialog");// adds a single panel on second page (as there is only one panel, no menu will appear on the left side)dialog.addPanel("SinglePanel", "<p>Some content for the only panel on Page 1</p>", "singlePanel");// add "Previous" button to page 1dialog.addButton("Previous", function(dialog) { dialog.prevPage();});// adds "Cancel" button to page 1dialog.addButton("Cancel", function (dialog) { dialog.hide();});// Add events to dialog trigger elementsAJS.$("#example2-dialog-button").click(function() { // PREPARE FOR DISPLAY // start first page, first panel dialog.gotoPage(0); dialog.gotoPanel(0); dialog.show();});<button class="aui-button" id="example2-dialog-button">Show dialog</button>The Dialog API uses a Dialog object which can be instantiated as follows:
var dialog = new AJS.Dialog({ width:800, height:500, id:"dialog-name", closeOnOutsideClick: true});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 |
dialog.addHeader( "HEADING", "title-class"); |
addButton |
label, onClickEvent, className | adds a new button to the button panel of the dialog |
dialog.addButton( "label", fnOnClickHandler, "button-class-name"); |
addLink |
label, onClickEvent, className | adds a new link to the button panel of the dialog |
dialog.addLink( "label", fnOnClickHandler, "link-class-name", "url"); |
addSubmit |
label, onClickEvent | adds a standard submit button to your dialog, you must specify the onClick action |
dialog.addSubmit( "label", function() { //on click event }); |
addCancel |
adds a standard cancel link to your dialog |
dialog.addCancel( "label", fnOnClickHandler); |
|
addButtonPanel |
adds a new button panel to the current page |
dialog.addButtonPanel(); |
|
addPanel |
title, selectorForContent (eg. jQuery selector), className | adds a new panel to the current page of the dialog |
dialog.addPanel("title", "content-selector", "panel-class-name",); |
addPage |
className | adds a new page to the dialog |
dialog.addPage("page-class-name"); |
nextPage |
goes to the next page in the dialog hierarchy |
dialog.nextPage(); |
|
prevPage |
goes to the previous page in the dialog hierarchy |
dialog.prevPage(); |
|
gotoPage |
pageNumber | goes to a specific page in the dialog hierarchy |
dialog.gotoPage(3); |
getPanel |
pageorpanelID, panelID | returns the desired panel object |
dialog.getPanel(1, 3); |
getPage |
pageID | returns the desired page object |
dialog.getPage(1); |
getCurrentPanel |
returns the current panel object |
dialog.getCurrentPanel(); |
|
gotoPanel |
pageObject , panelIDorObject | goes to a specific panel in the dialog hierarchy |
dialog.gotoPanel(page, 3); |
show |
shows the dialog |
dialog.show(); |
|
hide |
hides the dialog |
dialog.hide(); |
|
remove |
removes the dialog |
dialog.remove(); |
|
disable |
disables the dialog making it unclickable and unresponsive |
dialog.disable(); |
|
enable |
enables the dialog if it is disabled |
dialog.enable(); |
|
updateHeight |
updates the height of a dialog if content is expanded so that scrollbars are not required |
dialog.updateHeight(); |
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.
function fnOnClickHandler(dialog, page) { // dialog = This AJS.Dialog instance // page = The page of the dialog to which this button has been added // As of AUI 3.4: // Return true to allow the default action of this click event. // Return any other value to prevent the default action of this click event. return true;}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:
AJS.bind("show.dialog", function(e, data) { console.log("Dialog shown " + data.dialog.id);});