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

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

<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
HTML Living Standard
La definición de '<dialog>' en esta especificación.
Living Standard  
HTML 5.1
La definición de '<dialog>' en esta especificación.
Recommendation Definición inicial

Compatibilidad de navegadores

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 37Edge Sin soporte NoFirefox Soporte completo 53
Notas Deshabilitado
Soporte completo 53
Notas Deshabilitado
Notas See bug 840640.
Deshabilitado From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 24Safari Sin soporte NoWebView Android Soporte completo 37Chrome Android Soporte completo 37Edge Mobile Sin soporte NoFirefox Android Soporte completo 53
Notas Deshabilitado
Soporte completo 53
Notas Deshabilitado
Notas See bug 840640.
Deshabilitado From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Soporte completo Si
openChrome Soporte completo 37Edge Sin soporte NoFirefox Soporte completo 53
Notas Deshabilitado
Soporte completo 53
Notas Deshabilitado
Notas See bug 840640.
Deshabilitado From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 24Safari Sin soporte NoWebView Android Soporte completo 37Chrome Android Soporte completo 37Edge Mobile Sin soporte NoFirefox Android Soporte completo 53
Notas Deshabilitado
Soporte completo 53
Notas Deshabilitado
Notas See bug 840640.
Deshabilitado From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

 

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, danielblazquez, abaracedo
Última actualización por: mdnwebdocs-bot,