0El elemento <dialog> ingresó originalmente a la escena HTML5 como una forma de marcar conversaciones, pero se eliminó de la especificación en 2009. Sin embargo, ahora está de regreso y tiene un rol completamente nuevo.
El nuevo elemento <dialog> facilita mucho a los desarrolladores la creación de cuadros de diálogo emergentes y modales para sus aplicaciones web. Antes, esto requería usar un complemento de jаvascript. Sin embargo, los cuadros de diálogo emergentes se han vuelto tan populares que el equipo de Chrome ha decidido crear una implementación nativa de este componente de la interfaz de .
Para definir un nuevo cuadro de diálogo, solo necesita agregar un elemento <dialog> en algún lugar de su marcado HTML. Cualquier HTML que se coloque entre las dos etiquetas se mostrará en el cuadro de diálogo.
<dialog id="dialog">
<p>Hola, ¡soy un diálogo!</p>
<button id="cerrar">Está bien</button>
</dialog>Una vez que haya definido su cuadro de diálogo, puede mostrarlo utilizando los métodos proporcionados por la nterfaz HTMLDialogElement. Echemos un vistazo a eso a continuación.
La interfaz HTMLDialogElement
La nterfaz HTMLDialogElement proporciona una serie de métodos y propiedades que se pueden usar para mostrar y ocultar sus cuadros de diálogo. Estos se pueden llamar directamente en sus elementos <dialog>.
var dialog = document.getElementById('#dialog');
dialog.show();El navegador se encargará de posicionar correctamente su cuadro de diálogo cuando se inicie. Puede anular esto si desea usar CSS. Veremos cómo hacerlo más adelante.
La implementación actual de la interfaz HTMLDialogElement incluye soporte para una pila de diálogo pendiente. Esto significa que puede poner en cola múltiples cuadros de diálogo que se mostrarán al individualmente.
Métodos
La interfaz HTMLDialogElement proporciona métodos para mostrar y cerrar cuadros de diálogo. Estos son:
- show( ) – Se utiliza para iniciar un diálogo. El aún podrá interactuar con otros elementos en la página mientras el cuadro de diálogo esté visible.
- showModal() – El showModal()método también lanzará un diálogo. Sin embargo, este método evitará que el interactúe con otra cosa que no sea el diálogo. Esto es similar a cómo funcionan las alertas tradicionales.
- close() – Este método cerrará un cuadro de diálogo. Opcionalmente, puede pasar un returnValueparámetro que actualizará la returnValuepropiedad en el cuadro de diálogo.
Propiedades
La interfaz HTMLDialogElement tiene dos propiedades únicas.
- returnValue – Esta propiedad se utiliza para recuperar el valor pasado a close().
- open – Este es un valor booleano que se establecerá truecuando el cuadro de diálogo esté visible.
Eventos
Un close activará un evento cuando se cierre el cuadro de diálogo. Puede escuchar esto usando un detector de eventos estándar en el cuadro de diálogo.
dialog.addEventListener('close', function(e) {
// Hacer algo
});Creación de diálogos modales
Veamos algunos ejemplos de dialogos modales:
Comentarios