Cómo crear modales fácilmente con dialog
📅 27 de abril de 2023
Hoy vamos a hablar de una etiqueta nativa de HTML5 que puede hacer que nuestros sitios web sean aún más interesantes y útiles: ¡la etiqueta “dialog”!
La etiqueta “dialog” es una etiqueta HTML5 que nos permite crear ventanas emergentes personalizadas en nuestros sitios web. ¿Recuerdas esas ventanas emergentes que aparecen en algunos sitios web cuando haces clic en un botón o enlace? Bueno, la etiqueta “dialog” te permite crear esas ventanas emergentes con muy poco esfuerzo.
El uso de la etiqueta “dialog” es muy sencillo. Todo lo que necesitas hacer es crear una etiqueta “dialog” en tu HTML y luego agregar algún contenido dentro de ella. Luego, puedes usar JavaScript para mostrar u ocultar la ventana emergente cuando sea necesario.
Aquí hay un ejemplo de cómo se ve el código HTML para crear una ventana emergente usando la etiqueta “dialog”:
<dialog id="myModal">
<h1>¡Hola!</h1>
<p>Esta es una ventana emergente personalizada.</p>
<button onclick="closeModal()">Cerrar</button>
</dialog>En este ejemplo, creamos una etiqueta “dialog” con el ID “myModal”. Dentro de la etiqueta “dialog”, agregamos un encabezado H1 y un párrafo que contiene nuestro mensaje personalizado. También agregamos un botón para cerrar la ventana emergente, que se activará cuando se haga clic en él.
Para mostrar u ocultar la ventana emergente, podemos usar JavaScript para llamar a las funciones “showModal()” y “closeModal()” en la etiqueta “dialog”. Aquí hay un ejemplo de cómo podríamos hacerlo:
function showModal() {
let modal = document.querySelector('#myModal')
modal.showModal()
}
function closeModal() {
let modal = document.querySelector('#myModal')
modal.close()
}En este ejemplo, creamos dos funciones de JavaScript: “showModal()” y “closeModal()”. La función “showModal()” llama a la función “showModal()” en la etiqueta “dialog”, que muestra la ventana emergente en la pantalla. La función “closeModal()” llama a la función “close()” en la etiqueta “dialog”, que oculta la ventana emergente.
Como puedes ver, la etiqueta “dialog” es una herramienta útil para crear ventanas emergentes personalizadas en tus sitios web. ¡Atrévete a experimentar y crea tus propias ventanas emergentes personalizadas para darle a tus usuarios una experiencia única y atractiva!