<dialog>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

El elemento HTML <dialog> representa una caja de diálogo u otro componente interactivo, como inspector o ventana.

Content categories Flow content, sectioning root
Permitted content Flow content
Tag omission Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Permitted parent elements Any element that accepts flow content
DOM interface HTMLDialogElement

Atributos

Este elemento incluye los atributos globales. El atributo tabindex no debe utilizarse en el elemento <dialog>.

open

Indica que el diálogo está activo y disponible para interactuar. Cuando el atributo open no está asignado, no debe mostrarse al usuario.

Notas de uso

  • Los elementos <form> pueden integrarse dentro de un diálogo especificándolos con el atributo method="dialog". Cuando se envía un formulario, el diálogo se cierra con un atributo returnValue asignado con el value del botón utilizado.
  • El pseudo-elemento ::backdrop de CSS puede utilizarse para dar estilos al elemento <dialog>, por ejemplo para atenuar contenido inaccesible mientras el diálogo modal esté activo.

Ejemplos

Ejemplo 1

html
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Ejemplo 2

html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
  (function () {
    var updateButton = document.getElementById("updateDetails");
    var cancelButton = document.getElementById("cancel");
    var favDialog = document.getElementById("favDialog");

    // Update button opens a modal dialog
    updateButton.addEventListener("click", function () {
      favDialog.showModal();
    });

    // Form cancel button closes the dialog box
    cancelButton.addEventListener("click", function () {
      favDialog.close();
    });
  })();
</script>

Especificaciones

Specification
HTML Standard
# the-dialog-element

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también