Light-dismiss dialogs with closedby

Limited support Reference ↗

Let users dismiss a modal dialog by clicking or tapping outside it. closedby="any" adds native light dismissal without a custom backdrop click handler.

<button type="button" id="open-dialog">Open dialog</button>

<dialog id="notice" closedby="any" aria-labelledby="notice-title">
  <h2 id="notice-title">A quick note</h2>
  <p>Click outside, press Escape, or use the close button.</p>
  <form method="dialog">
    <button autofocus>Close</button>
  </form>
</dialog>

<script>
  const notice = document.querySelector('#notice');
  document.querySelector('#open-dialog').addEventListener('click', () => {
    notice.showModal();
  });
</script>

any permits outside-click dismissal, platform close requests such as Escape, and explicit application controls. closerequest permits the latter two; none leaves closure to application controls.

Open the dialog with showModal() to get modal behavior, the top layer and an inert background. Adding the open attribute alone does not make a modal dialog.

Support for closedby is more limited than support for dialog itself. The explicit close button still works when outside-click dismissal is unavailable. Choose the dismissal policy deliberately for forms that could lose user input.