<dialog> improvements (closedby, :modal, requestClose)

`<dialog>` + `:modal` Baseline 2022. `closedby` attribute: Chrome 134, Firefox 137; Safari pending (Interop 2026 item), so not Baseline as of 2026-09.

Chrome 134Edge 134Safari noFirefox 137

Native modal dialogs have the right focus trapping, inertness of the page and Escape handling. `closedby="any"` adds light-dismiss (click outside closes), `closedby="none"` blocks Escape, without JS listeners.

CSS

.fx-013 {
  border: 0;
  border-radius: 14px;
  padding: 24px;
  max-width: 360px;
  box-shadow: 0 20px 60px #0004;
  font-family: system-ui
}
.fx-013::backdrop {
  background: #0006;
  backdrop-filter: blur(3px)
}
.fx-013:modal {
  margin: auto
}
@starting-style {
  .fx-013:open {
    opacity: 0;
    translate: 0 12px
  }
}
.fx-013:open {
  transition: opacity .2s,translate .2s
}
.fx-013 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-013-btn" onclick="document.getElementById('fx-013').showModal()">Open dialog</button>
<dialog id="fx-013" class="fx-013" closedby="any">
  <h3>Confirm</h3><p>Click outside or press Escape to dismiss.</p>
  <form method="dialog"><button>Done</button></form>
</dialog>

Fallback: Without `closedby`, only Escape closes; add a click handler on the dialog that checks `event.target === dialog` where light-dismiss is required.

Source: web-platform-dx.github.io/web-features-explorer/features/dialog-closedby/ and https://github.com/web-platform-tests/interop/blob/main/2026/README.md

Prompt

Use the native `<dialog>` element with `showModal()` for modals; style the dim layer with `::backdrop`, use `method="dialog"` forms for closing, and add `closedby="any"` for light-dismiss (Safari lacks it as of 2026-09, so also keep a tiny backdrop-click handler). Do not build a custom focus trap or `aria-modal` div.