<dialog>: l'elemento di "dialogo"

L' elemento HTML <dialog> rappresenta una finestra di dialogo o un altro componente interattivo, come un avviso, una finestra di ispezione o una sottofinestra non consentiti.

Attributi

Gli attributi di questo elemento includono gli attributi globali.

open

Indica che la finestra di dialogo è attiva ed è possibile interagire con essa. Quando l'attributo open non è impostato, la finestra di dialogo non dovrebbe essere mostrata all'utente.

Considerazioni sull'accessibilità

L'elemento <dialog> presenta ancora problemi di compatibilità con alcune forme di tecnologia assistiva, che potrebbero impedire alle persone di leggere o utilizzare il contenuto dell'elemento <dialog>. Per questo motivo, si consiglia di utilizzare una soluzione provvisoria come a11y-dialog fino a quando il supporto non migliora.

Note d'uso

• Gli elementi <form> possono chiudere una finestra di dialogo se hanno l'attributo method="dialog". Quando un tale modulo viene inviato, la finestra di dialogo si chiude con la sua proprietà returnValue impostata su value sul pulsante utilizzato per inviare il modulo.

• Lo pseudo-elemento CSS ::backdrop può essere utilizzato per applicare uno stile dietro a un elemento <dialog> quando la finestra di dialogo viene visualizzata con HTMLDialogElement.showModal(). Ad esempio, per attenuare il contenuto irraggiungibile dietro la finestra di dialogo modale.

Esempi

Esempio semplice

<dialog open>
  <p>Un saluto a tutti!</p>
  <form method="dialog">
    <button>OK </button>
  </form>
</dialog>

Esempio avanzato

Questo esempio apre una finestra di dialogo popup che contiene un modulo, quando si fa clic sul pulsante "Aggiorna dettagli".

HTML

<dialog id="favDialog">
  <form method="dialog">
    <p><label>Animali preferiti:
      <select>
        <option value="default"> Scegli... </option>       
        <option>Panda </option>
        <option>Giraffa </option>
        <option>Leone </option>
      </select>
    </label></p>
    <div>
      <button value="cancel">Cancella </button>
      <button id="confirmBtn">Conferma </button>
    </div>
  </form>
</dialog>
<p>
  <button id="updateDetails">Aggiorna </button>
</p>
<output></output>

Javascript

const updateButton = document.getElementById('updateDetails');
const favDialog = document.getElementById('favDialog');
const outputBox = document.querySelector('output');
const selectEl = favDialog.querySelector('select');
const confirmBtn = favDialog.querySelector('#confirmBtn');

//Se il browser non supporta la finestra di dialogo,
//nascondi il contenuto della finestra di default
if( typeof favDialog.showModal !== 'function' ) {
  favDialog.hidden = true;
  /*Uno script di riserva potrebbe essere fornito qui*/
}
//Il pulsante "Aggiorna dettagli" apre la finestra di dialogo
updateButton.addEventListener('click', function onOpen() {
  if (typeof favDialog.showModal === "function"( {
    favDialog.showModal();
  } else  {
    outputBox.value = "Mi dispiace, la finestra di dialogo non è supportata da questo browser.";
  }
});
// L'input "Animale preferito" imposta il valore del pulsante di invio
selectEl.addEventListener('change', function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// Il pulsante "Conferma" del modulo attiva "chiudi" nella finestra di dialogo a causa di [method="dialog"]
favDialog.addEventListener ('close', function onClose() {
  outputBox.value = favDialog.returnValue + " button clicked - " + (new
Date()).toString();
});

Liste utili

• Attributi
• Attributi globali
• Elementi