Dialog2

Ask a question Design guidelines

Summary

Modal dialogs are used to get a response from a user or reveal critical information that cannot be ignored.

Status

API status: general
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:dialog2
Experimental since: 5.3
General API status: 5.8

Examples

Code

Note that in the footer, the hint text (class="aui-dialog2-footer-hint") should be placed in the DOM below the footer actions (class="aui-dialog2-footer-actions") even though the hint text appears to the left of the footer actions

Options

HTML attributes

Dialog2 configuration options are expressed through markup.

Class Description Example Usage
aui-dialog2-small | aui-dialog2-medium | aui-dialog2-large | aui-dialog2-xlarge Controls the size of the dialog according to ADG size specifications.
.aui-dialog2-warning Gives the dialog's header a red background color.
Attribute Values Description Example Usage
data-aui-modal true Specifies that the dialog is modal. Modal dialogs have no close icon in the top right corner, and cannot be closed by clicking on the blanket behind it.
data-aui-remove-on-hide true Specifies that the dialog element should be removed from the DOM when it is hidden, either by clicking on the close icon, clicking on the blanket behind the dialog, or calling the hide() method.
data-aui-focus-selector selector Controls the element that is focussed when the dialog is opened.

API

To get a reference to the API for a dialog2 instance, call AJS.dialog2(selector), where selector can be a selector string, DOM node, or jQuery element.

Methods

Method Description Example Usage
show Shows a dialog.
hide Hides a dialog.
remove Removes the dialog from the DOM.

Events

Events are triggered when dialogs are shown or closed. These can be listened to for a single dialog instance, or for all dialogs.

Event Description Example Usage
show Triggered when a dialog instance is shown.
hide Triggered when a dialog instance is hidden.
global show Triggered when any dialog is shown.
global hide Triggered when any dialog is hidden.