<dialog>: the "dialog" element

The HTML <dialog> element represents a dialog box or other interactive component, such as a disallowed alert, inspector, or subwindow.

Attributes

Warning: The tabindex attribute should not be used on the <dialog> element.

open

Indicates that the dialog is active and can be interacted with. When the open attribute is not set, the dialog should not be shown to the user.

Accessibility considerations

The <dialog> element still has compatibility issues with some forms of assistive technology, which may prevent people from reading or using the contents of the <dialog> element. For this reason, we recommend using an interim solution such as a11y-dialog until support improves.

Usage notes

• The <form> elements can close a dialog if they have the method="dialog" attribute. When such a form is submitted, the dialog box closes with its returnValue property set to value on the button used to submit the form.
• The CSS ::backdrop pseudo-element can be used to apply a style behind a <dialog> element when the dialog is displayed with HTMLDialogElement.showModal(). For example, to smooth out unreachable content behind the modal dialog.

Examples

Simple example

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

Advanced example

This example opens a popup dialog box containing a form, when you click the "Update Details" button.

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();
});