We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

[1] See error 840640.

Ver también

Etiquetas y colaboradores del documento

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