Modal dialogs are used to get a response from a user or reveal extra information related to a given scenario.
|Web resource key:||
|AMD Module key:||
Anatomy of a dialog
Below you can see an overview of the dialog 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
hidden attribute 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.
Opening and closing a dialog
By default the dialog closes after the close button or the blanket is clicked.
To make the dialog open and close in other cases you can use
Focus management after dialog is closed
By default after the dialog is closed the focus returns to the element that was focused before it was opened.
However there are cases in which you have to explicitly set the focus after the dialog is closed,
e.g. the element focused before dialog opening no longer exists in the document.
While deciding which element should be focused keep in mind the natural flow of operation and user journey.
hide event to achieve the required behaviour.
A warning dialog
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.
||Controls the size of the dialog according to ADG size specifications.|
||Gives the dialog's header a red background color.|
||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.|
||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.|
Controls the element that is focussed when the dialog is opened. By default the focus goes to the dialog element itself to meet the accessibility expectations in most common cases.
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.
||Shows a dialog.|
||Hides a dialog.|
||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.
||Triggered when a dialog instance is shown.|
||Triggered when a dialog instance is hidden.|
||Triggered when any dialog is shown.|
||Triggered when any dialog is hidden.|