dexblog.ro
JS Toate comenzile JavaScript

dialog.showModal / show / close în JavaScript

Formulare, media și canvas Browserele din 2022

Deschide o fereastră de dialog (modală sau nu) construită cu elementul HTML <dialog> și o închide.

Sintaxă 
dialog.showModal()
dialog.show()
dialog.close(valoareReturnata)

Ce face dialog.showModal / show / close

showModal() afișează un <dialog> deasupra paginii, cu fundalul blocat (stilizat cu ::backdrop) și focusul prins în interior; Esc îl închide. show() îl afișează fără să blocheze pagina.

close(valoare) îl închide și setează dialog.returnValue. Un formular cu method="dialog" din interior închide dialogul automat, iar returnValue devine valoarea butonului apăsat. Evenimentul close anunță închiderea.

Parametri

Parametru Descriere
valoareReturnata Opțional, la close: textul pus în returnValue.

Ce returnează

undefined.

Exemple

Exemplul 1: Confirmarea ștergerii

Rezultatul după un clic pe „Șterge”.

<dialog id="confirmare">
  <form method="dialog">
    <p>Ștergi definitiv articolul?</p>
    <button value="nu">Renunță</button>
    <button value="da">Șterge</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById("confirmare");
  dialog.addEventListener("close", () => console.log("răspuns:", dialog.returnValue));
  dialog.showModal();
  console.log(dialog.open);
</script>

Rezultat în browser

true
răspuns: da

Greșeli frecvente

  • Construiești ferestre modale din div-uri și uiți de tastatură și cititoarele de ecran. <dialog> cu showModal() le rezolvă singur.
  • Apelezi showModal() pe un dialog deja deschis cu show() și primești InvalidStateError.

Comenzi înrudite