Los diálogos y los modales son partes integrales de la mayoría de las aplicaciones web. Si bien crearlos a mano no es una tarea compleja, rápidamente se vuelve tediosa para cualquier desarrollador web. La alternativa habitual a construirlos a mano es usar un componente construido por otra persona.
Sin embargo, hay un par de problemas con este enfoque. Hay tantas opciones que se hace difícil saber qué componente sería el mejor para usar, y personalizar la apariencia de dichos componentes a veces puede ser tan tedioso como crear un cuadro de diálogo manualmente. Afortunadamente, existe otra alternativa: el elemento de diálogo HTML.
¿Qué es el elemento de diálogo?
El elemento de diálogo HTML es una etiqueta HTML integrada (como div o span), que permite a los desarrolladores crear cuadros de diálogo y modales personalizados. El elemento de diálogo ha existido en Chrome y Opera desde 2014, pero solo recientemente fue compatible con todos los principales navegadores.
¿Por qué utilizar el elemento de diálogo?
La razón principal para usar el elemento de diálogo es la conveniencia. Facilita la creación de cuadros de diálogo que pueden aparecer en línea o mostrarse como modales, con nada más que una sola etiqueta HTML y unas pocas líneas de JavaScript.
El elemento de diálogo elimina la necesidad de crear y depurar un diálogo personalizado o importar el componente de otra persona. También es muy fácil diseñar con CSS.
Soporte del navegador para el elemento de diálogo
Desafortunadamente, el soporte del navegador para el elemento de diálogo podría ser mejor. Es compatible con las últimas versiones de todos los principales navegadores a partir de marzo de 2022, con algunas advertencias.
Cualquier navegador Firefox anterior a Firefox 98 solo lo admitirá si está habilitado manualmente en la configuración del navegador, y cualquier versión de Safari anterior a Safari 15.4 no lo admite en absoluto. Los detalles completos de soporte del navegador están disponibles en Puedo usar.
Afortunadamente, esto no significa que el elemento de diálogo no se pueda usar. El equipo de Google Chrome mantiene un polyfill que puedes encontrar en Github para el elemento de diálogo que lo admite incluso en navegadores en los que no se admite de forma nativa.
En su forma actual, el elemento de diálogo puede tener problemas de accesibilidad, por lo que podría ser más adecuado utilizar un componente de diálogo personalizado como a11y-diálogo en aplicaciones de producción.
Cómo utilizar el elemento de diálogo
Para demostrar cómo usar el elemento de diálogo, lo usará para crear una característica común del sitio web: un modal de confirmación para un botón de eliminación.
Todo lo que se requiere para seguir es un solo archivo HTML.
1. Configurar el archivo HTML
Comience por crear dicho archivo y asígnele el nombre index.html.
A continuación, establezca la estructura del archivo HTML y proporcione metainformación básica sobre la página, para que se visualice correctamente en todos los dispositivos.
Escriba el siguiente código en index.html:
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="UTF-8">
<meta http-equiv="Compatible con X-UA" contenido="IE = borde">
<metanombre="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1.0">
<título>Demostración de diálogo</title>
</head><estilo></style>
<cuerpo></body>
<guion></script>
</html>
Esa es toda la configuración necesaria para este proyecto.
2. Escribir el marcado
A continuación, escriba el marcado para el botón Eliminar, así como el elemento de diálogo.
Escriba el siguiente código en la etiqueta del cuerpo de index.html:
<clase div="contenedor de botones">
<botón>
Borrar artículo
</button>
</div>
<diálogo>
<división>
Estás seguro que quieres Eliminareste ¿artículo?
</div>
<división>
<clase de botón ="cerca">
Sí
</button>
<clase de botón ="cerca">
No
</button>
</div>
</dialog>
El HTML anterior creará:
- Un botón de borrar.
- El elemento de diálogo.
- Dos botones dentro del diálogo.
Si index.html está abierto en su navegador, el único elemento visible en la pantalla será el botón de eliminar. Esto no significa que haya nada malo, el elemento de diálogo simplemente requiere un poco de JavaScript para hacerse visible.
3. Agregar JavaScript
Ahora, escriba el código que abrirá el cuadro de diálogo cuando un usuario haga clic en el botón Eliminar, así como el código para permitir que se cierre el cuadro de diálogo.
Escriba lo siguiente en la etiqueta de script de index.html:
constante modal = documento.querySelector("diálogo")
documento.querySelector("botón .button-contenedor").addEventListener("hacer clic", () => {
modal.showModal();
});
constante closeBtns = documento.getElementsByClassName("cerrar");
para (btn de closeBtns) {
btn.addEventListener("hacer clic", () => {
modal.cerca();
})
}este codigo utiliza el método querySelector para obtener referencias a los botones y al cuadro de diálogo. A continuación, adjunta un detector de eventos de clic a cada botón.
Usted puede estar familiarizado con detectores de eventos en JavaScript, que puede usar usted mismo. El detector de eventos adjunto al botón Eliminar llama al método showModal() para mostrar el cuadro de diálogo cuando se hace clic en el botón.
Cada botón dentro del modal tiene un detector de eventos adjunto que usa el método close() para ocultar el cuadro de diálogo cuando se hace clic en ellos.
Incluso si no hay JavaScript que llame al método close() en el código, los usuarios también pueden cerrar el modal presionando la tecla Escape en su teclado.
Ahora que este JavaScript está en su lugar, si un usuario hace clic en el botón Eliminar, se abrirá el modal y al hacer clic en el botón Sí o No se cerrará el modal.
Así es como debería verse el modal abierto:
Una cosa a tener en cuenta es que el elemento de diálogo ya viene con algunos estilos, aunque no hay CSS en index.html. El modal ya está centrado, tiene un borde, el ancho está limitado al contenido y tiene un relleno predeterminado.
Los usuarios no pueden interactuar (hacer clic, seleccionar) con nada en segundo plano mientras el modal está abierto.
El elemento de diálogo también puede mostrarse como parte del flujo de la página en lugar de como un modal. Para probarlo, cambie el primer detector de eventos en JavaScript así:
documento.querySelector("botón .button-contenedor").addEventListener("hacer clic", () => { modal.mostrar(); });Lo único que ha cambiado en este código es que el código está llamando al método show(), en lugar del método showModal(). Ahora, cuando un usuario hace clic en el botón Eliminar elemento, el modal debería abrirse en línea de esta manera:
4. Añadir estilo
A continuación, personalice el aspecto del cuadro de diálogo y su fondo escribiendo CSS.
El CSS reducirá el borde del cuadro de diálogo, limitará su ancho máximo y luego oscurecerá el fondo, además de agregar un poco de estilo a los botones.
Diseñar el cuadro de diálogo en sí es sencillo, pero la pseudoclase de fondo es necesaria para agregar un estilo que apunte al fondo del cuadro de diálogo.
Pegue el siguiente código en la etiqueta de estilo de index.html:
diálogo:: telón de fondo {
fondo: negro;
opacidad: 0.5;
}
botón {
borde-radio: 2px;
color de fondo: blanco;
borde: 1px negro sólido;
margen: 5px;
caja-sombra: 1px 1px 2px gris;
}
diálogo {
ancho máximo: 90vw;
borde: 1px negro sólido;
}
Cuando el cuadro de diálogo está abierto, ahora debería verse así:
Y has construido un diálogo completamente funcional.
El elemento de diálogo es una gran manera de construir modales
Usando el elemento de diálogo HTML que recientemente ganó soporte en todos los principales navegadores, los desarrolladores web ahora pueden crear completamente funcional, Modales y cuadros de diálogo fácilmente personalizables con una etiqueta HTML y unas pocas líneas de JavaScript y sin necesidad de depender de un tercero solución.
El elemento de diálogo tiene un polyfill mantenido por el equipo de Google Chrome, que permite a los desarrolladores usar el diálogo en versiones de navegador que no lo admiten.
