Aprende a crear una ventana modal sencilla y elegante utilizando solo HTML y CSS. Esta ventana es perfecta para mostrar información importante en tu sitio web sin recargar la página.
En este tutorial, aprenderás a implementar una ventana modal básica. Esta ventana modal es funcional, amigable y se puede cerrar al hacer clic en la "X".
Descubre cómo crear una ventana modal con HTML y CSS, perfecta para mostrar anuncios, formularios o alertas de forma no intrusiva en tu sitio web.
¿Qué aprenderás en este tutorial?
Con este tutorial, aprenderás a:
- Crear una ventana modal básica con HTML y CSS.
- Usar transiciones y efectos para mejorar la experiencia de usuario.
- Hacer que la ventana modal aparezca y desaparezca usando un
checkbox.
¿Qué necesitas para este proyecto?
Para realizar este proyecto, necesitarás:
- Un editor de código, como Visual Studio Code o Atom.
- Conocimientos básicos de HTML y CSS.
Cómo Crear una Ventana Modal en HTML y CSS
En este video, aprenderás a crear una ventana modal básica en HTML y CSS. No olvides suscribirte para más tutoriales de diseño web.
Código HTML:
Aquí tienes el código HTML de la ventana modal:
En este código:
- La ventana modal está controlada por un
checkboxoculto (#btn-modal) que, al ser marcado, muestra la ventana. - La etiqueta
<label>actúa como botón para abrir y cerrar la ventana modal. - El contenedor
.modalincluye el contenido de la ventana con estilos personalizados para el título, botón de cierre, y contenido.
Código CSS:
Aquí tienes el código CSS para estilizar la ventana modal y darle un efecto de entrada y salida:
Explicación del Código CSS:
Estilos de la Ventana Modal:
.modales el contenedor de fondo semitransparente que cubre toda la pantalla y tiene una transición para el efecto de desvanecido al aparecer..contenedores la ventana modal en sí, conbox-shadowpara un efecto de profundidad ytransformpara hacer que aparezca desde abajo hacia el centro de la pantalla.
Animación de Entrada:
- Cuando el
checkboxestá marcado (#btn-modal:checked),.modalse hace visible y.contenedorse mueve suavemente al centro contranslateY.
- Cuando el
Botón de Cerrar Modal:
- La
labeldentro de.contenedoractúa como botón de cierre. Está ubicada en la esquina superior derecha de la ventana y cierra el modal al hacer clic.
- La
Botón para Abrir el Modal:
.lbl-modales un botón simple que, al hacer clic, abre la ventana modal. Este botón se ve como un botón común con bordes redondeados.
Vista Previa:
Aquí tienes una vista previa de la ventana modal. Al hacer clic en "Abrir Modal", la ventana aparece en el centro de la pantalla y se cierra al hacer clic en "X".
Conclusión:
Esta ventana modal es una forma fácil y elegante de mostrar información adicional en tu sitio web sin redirigir al usuario.
