<dialog>

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

El elemento HTML <dialog> representa una caja de diálogo u otro componente interactivo, como inspector o ventana. 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.

Content categories Flow content, sectioning root
Permitted content Flow content
Tag omission None, both the starting and ending tag are mandatory.
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.

Ejemplos

Ejemplo 1

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

Ejemplo 2

<!-- 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

Especificación Estado Comentario
WHATWG HTML Living Standard
The definition of '<dialog>' in that specification.
Living Standard  
HTML5.1
The definition of '<dialog>' in that specification.
Working Draft Definición inicial

Compatibilidad de navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 37 Not supported[1] Not supported 24 Not supported
Anchor points Not supported Not supported Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 37 Not supported Not supported Not supported Not supported
Anchor points Not supported Not supported Not supported Not supported Not supported

[1] See bug 840640.

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: abaracedo
 Última actualización por: abaracedo,