<dialog>

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

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 # the-dialog-element

Compatibilidad con navegadores

Ver también

Formularios HTML.
El evento close
El evento cancel
El pseudo-elemento ::backdrop

Help improve MDN

Learn how to contribute

This page was last modified on ⁨21 jun 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content