HTML closedby Attribute

HTML closedby Attribute

The HTML closedby attribute controls which types of user actions can automatically close a <dialog> element. It can allow light dismiss, permit platform-specific close requests, or require the dialog to be closed using a developer-provided mechanism.

Syntax

The closedby attribute is specified on a <dialog> element and accepts one of three keywords.

<dialog closedby="any">
  <p>Dialog content goes here.</p>
</dialog>

The selected value determines which user actions are allowed to automatically close the dialog.

Attribute Values

The closedby attribute is an enumerated attribute with three keywords.

Elements That Use the closedby Attribute

The closedby attribute applies to the <dialog> element.

Using closedby="any"

The any value provides the broadest set of closing options. The dialog can respond to a platform-specific close request, such as pressing the Escape key, and can also use light dismiss when the user clicks or taps outside the dialog.

<dialog closedby="any">
  <p>This dialog supports light dismiss.</p>
  <button type="button">Close</button>
</dialog>

A developer-provided control or script can also close the dialog.

Using closedby="closerequest"

The closerequest value allows platform-specific close requests, such as pressing the Escape key on a desktop browser, but clicking outside the dialog does not provide light-dismiss behavior.

<dialog closedby="closerequest">
  <p>This dialog responds to close requests.</p>
  <button type="button">Close</button>
</dialog>

The exact platform-specific close action can vary according to the device and operating system.

Using closedby="none"

The none value prevents ordinary user actions from automatically closing the dialog. The page must provide an appropriate mechanism for closing it.

<dialog closedby="none">
  <p>Use the provided button to close this dialog.</p>
  <button type="button">Close</button>
</dialog>

When using closedby="none", make sure users are given a clear and accessible way to leave the dialog.

Default Behavior

If the closedby attribute is omitted or contains an invalid value, its behavior depends on how the dialog was opened.

This default state is known as the Auto state.

Light Dismiss

Light dismiss allows a dialog to close when the user clicks or taps outside it. For a <dialog> element, this behavior is enabled by closedby="any".

<dialog closedby="any">
  <p>Click outside this modal dialog to dismiss it.</p>
</dialog>

The closerequest and none values do not enable light dismiss.

Developer-Specified Closing

The closedby attribute controls automatic closing actions performed by the user agent. It does not prevent a developer-provided mechanism from closing the dialog.

<dialog id="example-dialog" closedby="none">
  <p>Use the button below to close this dialog.</p>
  <button type="button" id="close-dialog">Close</button>
</dialog>

For example, JavaScript can call the dialog's close() method when the user activates a Close button.

Common Mistakes

Do not treat closedby as a Boolean attribute. It requires one of the recognized values any, closerequest, or none.

<!-- Incorrect -->
<dialog closedby>
  ...
</dialog>

<!-- Correct -->
<dialog closedby="any">
  ...
</dialog>

Do not assume that closedby="none" prevents scripts from closing a dialog. It controls user actions that automatically close the dialog, not developer-specified closing mechanisms.

Do not rely on closedby="any" without considering browser compatibility. Browsers that do not support the attribute may not provide the requested light-dismiss behavior.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The closedby attribute on the <dialog> element has limited availability and should be tested before it is relied on for production interfaces.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the closedby Attribute

The example opens a modal dialog with closedby="any". In a supporting browser, you can close it with the Close button, a platform-specific close request such as the Escape key, or by clicking outside the dialog.

Summary

The HTML closedby attribute controls which user actions can automatically close a <dialog> element. The any value allows close requests and light dismiss, closerequest allows close requests without light dismiss, and none prevents user actions from automatically closing the dialog. Because browser support is still limited, pages should not depend on the attribute as the only way to control dialog behavior.