Modal dialogs are used to get a response from a user or reveal critical information that cannot be ignored.
| API status: | general |
|---|---|
| Web resource key: |
com.atlassian.auiplugin:aui-dialog2
|
| AMD Module key: |
require('aui/dialog2')
|
| Experimental API: | 5.3 |
| General API: | 5.8 |
In this example, you can see all the various pieces of the dialog's HTML pattern.
On its own, the dialog HTML pattern itself is static — the contents are added to the page inline.
To ensure the dialog does not get rendered to the page, you should add class="aui-layer"
and aria-hidden="true" to the dialog element.
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.
You can use JavaScript to make the dialog open and close.
Use this dialog type when you're representing a destructive action, and want the end-user to think more carefully about how they proceed.
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. |
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.
| Method | Description | Example Usage |
|---|---|---|
show |
Shows a dialog. | |
hide |
Hides a dialog. | |
remove |
Removes the dialog from the DOM. |
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. |