Modal dialogs are used to get a response from a user or reveal critical information that cannot be ignored.
|Included in AUI core?||Not in core You must explicitly require the web resource key.|
|Web resource key:||
|AMD Module key:||
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
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.
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.|
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.|