Creación de ventanas de diálogo HTML5 nativas

Publicado: 2017-03-29

La ventana de diálogo es uno de los elementos más utilizados en el diseño de la interfaz de usuario de un sitio web. Se utiliza para múltiples propósitos, incluida la visualización de notificaciones, llevar un formulario de suscripción, alertar sobre errores/advertencias y llamar la atención del visitante sobre información vital. Cuando las ventanas de diálogo se diseñan de manera efectiva y se usan correctamente, pueden facilitar la tarea del usuario.

Anteriormente, la creación de una ventana de diálogo requería que usara un complemento de jQuery como Pop Easy, jQuery UI Dialog o Twitter Bootstrap Modal. Pero ahora, con la introducción del nuevo elemento <dialog> de HTML5, se ha vuelto mucho más fácil para los desarrolladores crear cuadros de diálogo emergentes y modales en una página web.

Inicialmente, la etiqueta <dialog> ingresó a la especificación de HTML5 como una excelente solución para marcar conversaciones, pero se eliminó de la especificación de HTML5 en 2009. No obstante, está nuevamente en una nueva forma.

En esta publicación, lo guiaré a través del elemento <dialog> y le mostraré cómo puede aprovecharlo al máximo. ¡Vamos a empezar!

Si desea ver el elemento <dialog> en acción o jugar con el código, vea la demostración en vivo aquí.

Soporte de navegador para el elemento <dialog>

Desafortunadamente, el soporte del navegador para <dialog> es limitado por ahora. Actualmente, el elemento solo es compatible con Safari 6.0 y Chrome Canary. Aunque Chrome Canary es totalmente compatible con la etiqueta, debe habilitar una bandera para usarla. Vaya a chrome://flags y habilite la bandera "Habilitar características experimentales de la plataforma web" .

Habilitar características experimentales de la plataforma web habilitadas

Después de habilitar la bandera, debe volver a iniciar el navegador para que los cambios surtan efecto.

La interfaz HTMLDialogElement

La interfaz HTMLDialogElement , que se incluye en las especificaciones HTML para el elemento <dialog> , tiene numerosas propiedades y métodos que puede utilizar para hacer que sus cuadros de diálogo aparezcan y desaparezcan. Son los siguientes:

Métodos:

La interfaz HTMLDialogElement tiene tres métodos para abrir y cerrar cuadros de diálogo.

  • show() : este método se usa para mostrar un diálogo. Los usuarios aún pueden acceder a otros contenidos del documento HTML siempre que haya un cuadro de diálogo abierto.
  • showModal() : se usa para iniciar un "diálogo modal" , que evita que un usuario acceda a cualquier cosa excepto a la ventana de diálogo en una página web.
  • close() : Se utiliza para cerrar un cuadro de diálogo. Puede pasar returnValue como un parámetro opcional que actualizará la propiedad returnValue .

Propiedades:

Hay dos propiedades incluidas en la interfaz HTMLDialogElement .

  • returnValue : recupera el parámetro que se pasó opcionalmente a close() .
  • open : esta propiedad es un valor booleano. Si es true , el diálogo será visible para el usuario. De lo contrario, estará oculto.

Eventos:

Cuando se cierra un cuadro de diálogo, se activará un evento de close .

 diálogo.addEventListener('cerrar', función() {
Otro código irá aquí...
});

Además de estos métodos y propiedades clave, el elemento <dialog> también admite:

  • form[method="dialog"] : Se usa para integrar un formulario con un <dialog> . Sólo es válido dentro de un diálogo.
  • autofocus attribute : se usa para enfocar un control de formulario dentro de un cuadro de diálogo.
  • cancel event : se activa un evento de cancel cuando se cierra un cuadro de diálogo modal a través de "Esc"

Ahora, después de comprender los conceptos básicos del elemento <dialog> , seamos prácticos con algunos ejemplos.

Creación de un diálogo

En primer lugar, le mostraré cómo crear un diálogo simple. El código que se proporciona a continuación define un elemento <dialog> simple con algo de contenido, un botón de cierre para ocultar el diálogo y un botón de mostrar para iniciar el diálogo.



¡Bienvenido a Responsive Junction!


Haga que su sitio existente sea receptivo

Cuando pruebe el código anterior en su navegador, no verá nada excepto el botón "Mostrar cuadro de diálogo" sin ninguna funcionalidad, como se muestra en la captura de pantalla que se muestra a continuación:

Mostrar botón de diálogo sin ninguna funcionalidad

Para abrir y cerrar el elemento <dialog> , debe usar JavaScript .show() y .close() .

 (función() {  
 	var dialog = document.getElementById('Diálogo');
documento.getElementById('showDialog').onclick = function() {  
diálogo.mostrar();  
};  
documento.getElementById('closeDialog').onclick = function() {  
diálogo.cerrar();  
};
})();

Ahora, si hace clic en el botón "Mostrar diálogo" , puede ver la ventana de diálogo en el navegador. Al hacer clic en "Salir" se cerrará la ventana de diálogo. Aquí está la captura de pantalla:

Al hacer clic en Salir, se cerrará la ventana de diálogo.

Agregar estilo al cuadro de diálogo

Puede agregar estilos CSS a su cuadro de diálogo tal como lo haría con cualquier otro elemento. De forma predeterminada, la ventana de diálogo se mostrará centrada horizontalmente mientras se superpone a otros elementos. Si se siente cómodo con la posición y el aspecto predeterminados, no se requiere más CSS. De lo contrario, puede agregar su propio CSS para ajustar y diseñar la ventana de diálogo a su gusto, como he hecho a continuación:

 diálogo {
arriba: 28%;
ancho: 400px;  
borde: 1px sólido rgba (0, 0, 0, 0.3);
borde-radio: 15px;
sombra de caja: 0 3px 7px rgba(0, 0, 0, 0.3);
borde superior: 5px sólido #eb9816;
}
botón{
pantalla: bloque en línea;
borde-radio: 3px;
borde: ninguno;
tamaño de fuente: 0,9 rem;
relleno: 0.4rem 0.8em;
fondo: #eb9816;
borde inferior: 1px sólido #f1b75c;
color blanco;
fuente-peso: negrita;
margen: 0 0,25 rem;
alineación de texto: centro;
}
botón: pasar el cursor, botón: enfocar {
opacidad: 0,92;
cursor: puntero;
}

Agregar estilo al cuadro de diálogo

Crear un diálogo modal

Si desea evitar que sus usuarios accedan al contenido de su HTML, puede utilizar las ventanas de diálogo modales. Como la ventana de diálogo modal atenuará todo lo que no sea el diálogo, los usuarios no podrán seleccionar el texto atenuado ni hacer clic para seleccionar los botones mientras la ventana de diálogo esté abierta.

Crear modales es similar a crear cuadros de diálogo, con la única diferencia de usar .showModal() en lugar de .show() . No es necesario realizar ningún cambio en el código HTML.

(función() {  
 	var dialog = document.getElementById('Diálogo');
documento.getElementById('showDialog').onclick = function() {  
diálogo. mostrarModal(); 
};  
documento.getElementById('closeDialog').onclick = function() {  
diálogo.cerrar();  
};
})();

Mientras que los cuadros de diálogo predeterminados se muestran centrados horizontalmente, los cuadros de diálogo modales se muestran centrados tanto vertical como horizontalmente en la ventana gráfica. Además, puede cerrar un cuadro de diálogo modal presionando la tecla "Escape" .

Crear un diálogo modal

Agregar color de fondo de diálogo modal

El elemento <dialog> incluye un pseudoelemento llamado "::backdrop" , que solo funciona con diálogos modales. Con este elemento, puede atenuar la página principal para comunicar a los usuarios que no es accesible. Puede colocar y diseñar un fondo aprovechando las propiedades estándar de CSS:

 diálogo::fondo{
posición: fijo;
superior: 0;
izquierda: 0;
derecha: 0;
inferior: 0;
color de fondo: rgba(0, 0, 0, 0.7);
}

Agregar color de fondo de diálogo modal

Implementando <dialog> con un formulario

Un formulario se puede integrar con un elemento <dialog> usando form method="dialog" . Al enviar el formulario, la ventana de diálogo se cerrará y devolverá el valor del botón de envío a través de la propiedad dialog.returnValue .

Aquí está el código HTML para el cuadro de diálogo del formulario:





¿Estás de acuerdo con los términos de uso?

Utilice el siguiente código JavaScript para el cuadro de diálogo del formulario.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('enviar').onclick = function() {
formDialog.close(valor);
};
document.getElementById('formDialog').addEventListener('close', function() {
alerta(formDialog.returnValue);
});

Implementando <dialog> con un formulario

Nota : Para una mejor comprensión, estoy usando formDialog en lugar de Dialog en mi demostración.

Si desea ver el elemento <dialog> en acción o jugar con el código, vea la demostración en vivo aquí.

Conclusión

Con la reencarnación del elemento <dialog> , se ha vuelto mucho más fácil para los desarrolladores crear diálogos sin usar un complemento de jQuery. Aunque Chrome Canary y Safari 6.0 interpretan correctamente el elemento <dialog> , hay un polyfill disponible para asegurarse de que otros navegadores admitan el elemento.

Si desea obtener información sobre otras propiedades de HTML5, puede consultar Cómo familiarizarse con la API de archivo de HTML5 o puede obtener información sobre el atributo del menú contextual de HTML5.