Ce face <dialog>
Tagul <dialog> oferă o modală nativă accesibilă direct în HTML5. Când este deschis cu metoda JavaScript dialog.showModal(), browserul întunecă automat restul paginii (pseudo-elementul CSS ::backdrop), blochează derularea și mută focusul tastaturii în interiorul ferestrei.
Tasta Escape închide automat fereastra fără cod suplimentar. Poate fi închisă și printr-un formular simplu cu <form method="dialog">.
Atribute
| Atribut | Descriere |
|---|---|
open |
Indică faptul că fereastra modală este vizibilă și activă. |
Exemple
Exemplul 1: Fereastră modală de confirmare
Se deschide cu showModal() și se închide fie din buton, fie cu tasta Escape.
<button onclick="document.getElementById('modal-stergere').showModal()">Șterge contul</button>
<dialog id="modal-stergere">
<h3>Ești sigur?</h3>
<p>Această acțiune este ireversibilă.</p>
<form method="dialog">
<button value="anuleaza">Anulează</button>
<button value="confirma">Confirmă ștergerea</button>
</form>
</dialog>Ce afișează browserul
Un buton „Șterge contul” care deschide o fereastră centrată cu fundal estompat și opțiunile de confirmare.Greșeli frecvente
- Deschiderea dialogului adăugând manual atributul open prin JavaScript în loc să apelezi metoda nativă showModal(); dacă adaugi doar open, nu beneficiezi de backdrop și de blocarea tastaturii în modal.
Comenzi înrudite
<details> și <summary>: Creează un element nativ de tip acordeon: conținutul este ascuns și se extinde doar când utilizatorul apasă pe summary.<button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.<form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.