Dialog 345

[Cilinia Looker]

TheHTML element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.

JavaScript should be used to display the element. Use the .showModal() method to display a modal dialog and the .show() method to display a non-modal dialog. The dialog box can be closed using the .close() method or using the dialog method when submitting a that is nested within the element. Modal dialogs can also be closed by pressing the Esc key.

Indicates that the dialog box is active and is available for interaction. If the open attribute is not set, the dialog box will not be visible to the user. It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a is opened using the open attribute, it is non-modal.

When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using HTMLDialogElement.showModal() to open a , focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the autofocus attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, the element itself may provide the best initial focus placement.

Ensure a mechanism is provided to allow users to close the dialog. The most robust way to ensure that all users can close the dialog is to include an explicit button to do so, such as a confirmation, cancellation, or close button.

By default, a dialog invoked by the showModal() method can be dismissed by pressing the Esc key. A non-modal dialog does not dismiss via the Esc key by default, and depending on what the non-modal dialog represents, it may not be desired for this behavior. Keyboard users expect the Esc key to close modal dialogs; ensure that this behavior is implemented and maintained. If multiple modal dialogs are open, pressing the Esc key should close only the last shown dialog. When using , this behavior is provided by the browser.

While dialogs can be created using other elements, the native element provides usability and accessibility features that must be replicated if you use other elements for a similar purpose. If you're creating a custom dialog implementation, ensure that all expected default behaviors are supported and proper labeling recommendations are followed.

The element is exposed by browsers in a manner similar to custom dialogs that use the ARIA role="dialog" attribute. elements invoked by the showModal() method implicitly have aria-modal="true", whereas elements invoked by the show() method or displayed using the open attribute or by changing the default display of a are exposed as [aria-modal="false"]. When implementing modal dialogs, everything other than the and its contents should be rendered inert using the inert attribute. When using along with the HTMLDialogElement.showModal() method, this behavior is provided by the browser.

This example demonstrates the create a non-modal dialog by using only HTML. Because of the boolean open attribute in the element, the dialog appears open when the page loads. The dialog can be closed by clicking the "OK" button because the method attribute in the element is set to "dialog". In this case, no JavaScript is needed to close the form.

This dialog is initially open because of the presence of the open attribute. Dialogs that are displayed using the open attribute are non-modal. After clicking "OK", the dialog gets dismissed, leaving the Result frame empty. When the dialog is dismissed, there is no method provided to reopen it. For this reason, the preferred method to display non-modal dialogs is by using the HTMLDialogElement.show() method. It is possible to toggle the display of the dialog by adding or removing the boolean open attribute, but it is not the recommended practice.

This example demonstrates a modal dialog with a gradient backdrop. The .showModal() method opens the modal dialog when the "Show the dialog" button is activated. The dialog can be closed by pressing the Esc key or via the close() method when the "Close" button within the dialog is activated.

When a dialog opens, the browser, by default, gives focus to the first element that can be focused within the dialog. In this example, the autofocus attribute is applied to the "Close" button, giving it focus when the dialog opens, as this is the element we expect the user will interact with immediately after the dialog opens.

When the modal dialog is displayed, it appears above any other dialogs that might be present. Everything outside the modal dialog is inert and interactions outside the dialog are blocked. Notice that when the dialog is open, with the exception of the dialog itself, interaction with the document is not possible; the "Show the dialog" button is mostly obfuscated by the almost opaque backdrop of the dialog and is inert.

This example demonstrates the returnValue of the element and how to close a modal dialog by using a form. By default, the returnValue is the empty string or the value of the button that submits the form within the element, if there is one.

This example opens a modal dialog when the "Show the dialog" button is activated. The dialog contains a form with a and two elements, which default to type="submit". An event listener updates the value of the "Confirm" button when the select option changes. If the "Confirm" button is activated to close the dialog, the current value of the button is the return value. If the dialog is closed by pressing the "Cancel" button, the returnValue is cancel.

When the dialog is closed, the return value is displayed under the "Show the dialog" button. If the dialog is closed by pressing the Esc key, the returnValue is not updated, and the close event doesn't occur, so the text in the is not updated.

The "Cancel" button includes the formmethod="dialog" attribute, which overrides the 's default GET method. When a form's method is dialog, the state of the form is saved but not submitted, and the dialog gets closed.

Without an action, submitting the form via the default GET method causes a page to reload. We use JavaScript to prevent the submission and close the dialog with the event.preventDefault() and HTMLDialogElement.close() methods, respectively.

It is important to provide a closing mechanism within every dialog element. The Esc key does not close non-modal dialogs by default, nor can one assume that a user will even have access to a physical keyboard (e.g., someone using a touch screen device without access to a keyboard).

When a form inside a dialog has a required input, the user agent will only let you close the dialog once you provide a value for the required input. To close such dialog, either use the formnovalidate attribute on the close button or call the close() method on the dialog object when the close button is clicked.

From the output, we see it is impossible to close the dialog using the Normal close button. But the dialog can be closed if we bypass the form validation using the formnovalidate attribute on the Cancel button. Programmatically, dialog.close() will also close such dialog.

s are set to display: none; when hidden and display: block; when shown, as well as being removed from / added to the top layer and the accessibility tree. Therefore, for elements to be animated the display property needs to be animatable. Supporting browsers animate display with a variation on the discrete animation type. Specifically, the browser will flip between none and another value of display so that the animated content is shown for the entire animation duration.

Note: When animating using CSS transitions, transition-behavior: allow-discrete needs to be set to enable the above behavior. This behavior is available by default when animating with CSS animations; an equivalent step is not required.

Provides a set of starting values for properties set on the that you want to transition from every time it is opened. This is needed to avoid unexpected behavior. By default, CSS transitions only occur when a property changes from one value to another on a visible element; they are not triggered on elements' first style updates, or when the display type changes from none to another type.

Add display to the transitions list so that the will remain as display: block (or another visible display value set on the dialog's open state) for the duration of the transition, ensuring the other transitions are visible.

Set transition-behavior: allow-discrete on the display and overlay transitions (or on the transition shorthand) to enable discrete transitions on these two properties that are not by default animatable.

In the CSS, we include a @starting-style block that defines the transition starting styles for the opacity and transform properties, transition end styles on the dialog[open] state, and default styles on the default dialog state to transition back to once the has appeared. Note how the 's transition list includes not only these properties, but also the display and overlay properties, each with allow-discrete set on them.

We also set a starting style value for the background-color property on the ::backdrop that appears behind the when it opens, to provide a nice darkening animation. The dialog[open]::backdrop selector selects only the backdrops of elements when the dialog is open.

Note: Because s change from display: none to display: block each time they are shown, the transitions from its @starting-style styles to its dialog[open] styles every time the entry transition occurs. When the closes, it transitions from its dialog[open] state to the default dialog state.

3a8082e126