Crear cajas modales responsivas

Introducción

En este proyecto, aprenderás a crear un componente de caja modal que se puede mostrar y ocultar en una página web. Las cajas modales se utilizan comúnmente en aplicaciones web para mostrar contenido adicional o formularios sin navegar fuera de la página actual.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la estructura HTML para una caja modal
• Cómo implementar la funcionalidad para mostrar y ocultar la caja modal
• Cómo manejar la burbuja de eventos para evitar que la caja modal se muestre nuevamente después de ser ocultada

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Crear una caja modal utilizando HTML, CSS y JavaScript
• Utilizar funciones de JavaScript para controlar la visibilidad de la caja modal
• Evitar la burbuja de eventos para garantizar que la caja modal se comporte como se espera

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementar la funcionalidad de mostrar y ocultar

En este paso, aprenderás a implementar la funcionalidad para mostrar y ocultar la caja modal.

1. Localiza la sección <script> al final del archivo index.html.
2. En la sección <script>, encontrarás el siguiente código:

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

3. Entiende el propósito de cada función:

   • handleClick(e): Esta función se llama cuando se hace clic en el botón "Regístrate ahora". Establece la propiedad display de la caja modal en 'block', lo que hace que la caja modal sea visible.
   • handleOk(e): Esta función se llama cuando se hace clic en el botón de cierre "X" o el botón "OK" dentro de la caja modal. Establece la propiedad display de la caja modal en 'none', lo que oculta la caja modal.

4. La línea event.stopPropagation() en ambas funciones se utiliza para evitar que el evento de clic se propague a los elementos padres, lo que podría hacer que la caja modal se muestre nuevamente después de ser ocultada.

Probar la funcionalidad

1. Guarda el archivo index.html.
2. Actualiza la página web en tu navegador.
3. Haz clic en el botón "Regístrate ahora" para ver aparecer la caja modal.
4. Haz clic en el botón de cierre "X" o el botón "OK" dentro de la caja modal para ver desaparecer la caja modal. El efecto final debería ser el siguiente:

¡Felicidades! Has implementado con éxito la funcionalidad de mostrar y ocultar para la caja modal.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.