Web features: [\

](https://webstatus.dev/features/dialog-closedby) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). When a modal dialog is open, users expect to use familiar controls to dismiss them: pressing the Esc key on a keyboard, using the back button or gesture on mobile platforms, or a dismiss gesture with assistive technologies. When the `

` element was first introduced, it could be dismissed with the Esc key, but not other platform controls such as a back button/gesture on mobile. With the addition of the `closedby` attribute for `

` elements, the extended behavior of responding to more platform-specific controls for close requests has been applied for `

` elements that are opened in a modal state (i.e. when opened imperatively with the `

` element's `showModal()` method in JavaScript or declaratively with the `show-modal` invoker command). So, there is no specific change developers need to make if they are already using the `

` element. ```html

Example

Modal that can be dismissed with close requests.

``` When opened in a modal state, a dialog without the `closedby` attribute responds to close requests the same as explicitly setting the `closedby` attribute to `closerequest`. ```html

Example

Modal that can be dismissed with close requests.

``` If you also want "light dismiss" behavior, then you must set `closedby` to `any`: ```html

Example

Modal that can be dismissed with close requests and light dismiss.

``` ## Fallback strategies `

` elements opened in a modal state can already be dismissed with Esc, so there is no fallback necessary. There is no good way to implement close requests from mobile back button/gestures, so it is simpler to embrace this feature as a progressive enhancement, especially given that there are other inclusive means to dismiss the modal dialog. Similarly, light dismiss behavior for a `

` element using `closedby="any"` can be considered a progressive enhancement. Source: [platform-controls-dismiss-dialog guide on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/ui-behaviors/platform-controls-dismiss-dialog/guide.md)