En este tutoríal te enseñare como crear popup´s o ventanas emergentes solamente con CSS3 con un buen efecto de transición, ya que generalmente requerimos ayuda de JavaScript o jQuery para crear este tipo de componente, así que ganamos con esto mas velocidad en el sitio ya que solo utilizaremos CSS y también tendremos un sitio más limpio.
Como sabemos, las ventanas emergentes se utilizan para mostrar algún tipo de información a los usuarios en consecuencia a la acción que este realice, esta información puede ser gráfica, de texto o vídeo sin que necesariamente este visible siempre en la pagina web.
Asi que sin más, vamos con el código HTML.
Asi que sin más, vamos con el código HTML.
<div class="modal-wrapper" id="popup">
<div class="popup-contenedor">
<h2>Titulo de la Modal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor deleniti...</p>
<a class="popup-cerrar" href="#">X</a>
</div>
</div>
En el código html anterior especificamos la ventana modal que aparecerá con algún tipo de información, en este caso solamente texto, aunque podemos insertar vídeos, imágenes o lo que deseemos mostrar.
Ahora tenemos 2 opciones para mostrar el popup.
- Que se muestre automáticamente cuando el usuario ingrese al sitio web.
- Cuando el usuario realice alguna acción, por ejemplo un clic.
1°. Hacer que la modal aparezca cuando el usuario de clic sobre algo, sobre un link.
<a href="#popup" class="popup-link">Ver mas información</a>
Así que ya tenemos un desencadenante para que ejecute la acción de la modal, el clic al link. Ahora vamos con el CSS.
#popup {
visibility: hidden;
opacity: 0;
margin-top: -300px;
}
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(0,0,0,0.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 999;
transition:all 1s;
}
.popup-contenedor {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
width:50%;
}
a.popup-cerrar {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}
El código CSS es básico y fácil de entender, para destacar algunos pasos.
1°. Por medio del selector
#popup hacemos que no sea visible la ventana, esto con una opacidad en 0 y aplicando un margin-top: -300px; ubicandolo en la parte superior de la ventana del navegador esto para que aparezca desde arriba con un efecto de animación, y bueno dándole una visibilidad con el valor hidden.
2°. La ventana aparecerá cuando se active por medio de la Pseudo clase
:target es decir de clic en el enlace que tiene con enlace el selector o identificador #popup. Para en tender mejor esto te puedes fijar la barra Url del navegador, cuando la ventana este activa la barra de navegación termina en #popup y cuando no solamente #. Bueno simplemente en los etilos para este selector mostramos la ventana dándole opacidad, posicionamiento, z-index para sobre ponerlo en los demás elementos de la pagina y transición para darle el efecto de animación mientras esta aparece y el fondo de todo aplicamos un background de color negro semitransparente por medio del método RGBA con una alfa de 80%.
3°. En el selector
.popup-contenedor, damos estilos a la ventana modal como tal, color de fondo, ancho de la ventana del 50%, padding, bordes redondeados etc.
Y por medio del selector
a.popup-cerrar damos estilos y posicionamos el botón que cerrara la ventana modal.Popup Automatico
Para que se muestre automáticamente la modal le aplicaremos una animación al elemento #popup que se ejecutará cuando se cargue el sitio. La animación puede ser la siguiente:
keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
Y la aplicamos al selector que da los estilos a la ventana modal que tiene como ID
#popup#popup {
background-color: rgba(0,0,0,0.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
/* Animación que durará 2 segundos*/
animation:autopopup 2s;
}
Y eso es todo amigos, ojalá y este ejercicio pueda ser de tu beneficio
