`<dialog closedby>` în HTML

Elemente interactive HTML (2025): Chrome 134, Firefox 141; Safari încă nu

Atributul closedby alege cum se poate închide un dialog: cu clic în afara lui și Escape, doar cu Escape sau doar din cod.

Sintaxă tag

<dialog closedby="any">...</dialog>

Ce face `<dialog closedby>`

Atributul closedby de pe <dialog> controlează ce acțiuni ale utilizatorului închid fereastra. Fără el, un dialog modal (deschis cu showModal()) se închide cu Escape, iar unul nemodal (deschis cu show()) nu se închide singur.

Valoarea any adaugă închiderea la clic pe fundal, în afara ferestrei (light dismiss), comportament care înainte cerea JavaScript. closerequest permite doar Escape (sau gestul de înapoi pe Android). none lasă închiderea numai în seama codului și a butoanelor tale.

Suportul (octombrie 2026): Chrome 134+ și Firefox 141+; Safari îl are doar în Technology Preview. În Safari atributul este ignorat și dialogul se comportă ca înainte, deci pagina rămâne folosibilă.

Atribute

Atribut	Descriere
`any`	Se închide la clic în afara dialogului, la Escape și din cod.
`closerequest`	Se închide la Escape (cerere de închidere) și din cod; clicul în afară nu îl închide. Implicit pentru dialogurile modale.
`none`	Se închide doar din cod (`close()`) sau dintr-un buton din dialog. Implicit pentru dialogurile nemodale.

Exemple

Exemplul 1: Fereastră cu detalii închisă la clic în afara ei

Combinat cu commandfor, nu ai nevoie de JavaScript.

<button commandfor="detalii" command="show-modal">Vezi detaliile comenzii</button>

<dialog id="detalii" closedby="any">
  <h2>Comanda #4512</h2>
  <p>Livrare în Iași, 2 produse, total 349 lei.</p>
</dialog>

Ce afișează browserul

Dialogul se închide la clic pe fundalul întunecat, la Escape sau la apelul close().

Exemplul 2: Formular important care nu se închide din greșeală

Cu none, nici Escape, nici clicul în afară nu pierd datele scrise; închiderea se face doar din butoane.

<dialog id="plata" closedby="none">
  <form method="dialog">
    <label>Nume pe card <input name="nume" autocomplete="cc-name"></label>
    <button value="anulare">Anulează</button>
    <button value="ok">Plătește 120 lei</button>
  </form>
</dialog>
<script>document.getElementById("plata").showModal();</script>