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. Generalmente las utilizamos para mostrar un formulario de suscripción, invitaciones a dar me gusta e nuestra fanpage de facebook, seguirnos en twitter, publicidad gráfica etc. A si que sin más, vamos con el código HTML.

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.

  1. Que se muestre automáticamente cuando el usuario ingrese al sitio web.
  2. Cuando el usuario realice alguna acción, por ejemplo un clic.

. Hacer que la modal aparezca cuando el usuario de clic sobre algo, sobre un link.

Así que ya tenemos un desencadenante para que ejecute la acción de la modal, el clic al link. Ahora vamos con el CSS.

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.

Ver ejemplo


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;
}

Ver ejemplo


Y eso es todo amigos, ojalá y este ejercicio pueda ser de tu beneficio. 🙂