{ . . . }

Crear Ventana Modal con solo CSS

35 Comentarios

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. 🙂

35
Comentar

avatar
25 Comment threads
10 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
31 Comment authors
ivan zapataChrisJuan de la BarrerapolinFrancisco Recent comment authors
Nuevos Antiguos Más votados
Fabricio Espinoza
Fabricio Espinoza

ME queda un espacio en el lugar que implemente despues de cerrar

luciana
luciana

a mi también me pasa eso, como lo solucionaste?

JALKHOV
JALKHOV

Por desgracia ese espacio tiene que quedar ya que se utiliza el atributo visibility: hidden, eso solo hace que sea invisible, pero sigue ocupando su respectivo espacio, yo lo que hice fue utilizar el atributo display: none en #popup, luego en #popup:target utilicé display: block. Es decir, quedaria algo asi #popup { visibility: hidden; display: none; opacity: 0; margin-top: -300px } #popup:target { visibility: visible; display: block; opacity: 1; background-color: rgba(0, 0, 0, .8); position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; z-index: 999; transition: all 1s }

Isatis
Isatis

Muy buena solución

Álamo
Álamo

El primer ejemplo (el popup se abre al pulsar en un enlace) me funciona genial. El segundo ejemplo (el popup se abre automáticamente) parece funcionar bien al principio, pero no, ya que al pulsar en la [X] de la ventana emergente, esta no se cierra (no me funciona ese enlace ni con el href=”#popup” ni con el href=”#”).

Omar
Omar

A mi tambien me pasa lo mismo, lo solucionaste ya? que hiciste?

Luisheredia
Luisheredia

Cordial saludo. Lograste que la ventana se cierre al hacer clic en la X. Puesto que a mi tampoco me cierra. Mil gracias por tu colaboraicón

alejandro
alejandro

como puedo poner varias ventanas modales en una sola pagina cuando lo hago no me da la opción de cerrarla se queda estática.

Luis Jordan
Luis Jordan

¿Cómo es la estructura de archivos de este ejemplo? ¿Qué nombre recibe el archivo CCS y dónde debe quedar alojado?

carlos
carlos

CUAL seria la implementación para que se cierre automaticamente por ejempl en 10 segundos … ?

Gabriela
Gabriela

Todo genial, funciona muy bien, eres un capo, ¡Muchas gracias! Solo dos ayudita para aquellos que lo usen: (1) El código html esta en “body” por lo que ocupará un espacio (la idea es ocultarlo) y si este espacio les aparece en su pagina entonces no está ocultado. Verifiquen esta línea: #popup { margin-top: -300px;} esto lo esconde, ya no habrá espacios vacíos y ahora si solo aparecerá cuando se llama al enlace. Verán que aparece desde arriba, es porque ahí está escondido, arriba donde no se ve. (2) Al salir del popup, y dar en “X” lamentablemente NO se… Leer más »

willyal21
willyal21

Excelente ejemplo. Simple y fácil de adaptar.. Muchas Grcias

Rose
Rose

Y si deseo que se cierre al clickear fuera del margen y que cuando se cierre no regrese a la cabecera de la página sino que se quede donde estaba?

Alvaro
Alvaro

Excelente!! Justo lo que búscaba!! Gran aporte

yo_el_fuente
yo_el_fuente

excelente, lo que estaba buscando

pacop000
pacop000

ola,además del texto me gustaría implantar un pequeño video de you TUBE, en el que también abra automáticamente
si se puede que quede centrado entre el texto. No sé si hay posibilidad de conseguirlo y pudiésemos verlo. Muchas gracias por el aporte

Shamii
Shamii

Justo lo que andaba necesitando ! Pero tengo un problema, a ver si me podes ayudar: en la parte superior de la pagina me aparece un espacio en blanco y luego aparece mi pagina, alguna idea de por qué? (antes de poner el popup no aparecía)
Muchisimas gracias ! 😀

Fran
Fran

Hola,
La caja donde se define la ventana modal me deja un hueco vacío en la página principal. Alguien sabe como solucionarlo.
Gracias

Th3Khan31
Th3Khan31

Muy bueno tu ejemplo. y facil de entender.!

Gracias me has ayudado.

violeta
violeta

no puede haber mas de una ventana de estas por página? es que estoy intentando poner varias y la segunda que intento no me aparece, me leva al final de la web. Gracias

feromerob
feromerob

Yo lo hice agregándole un 2 a los nombres de las clases e id’s, y por su puesto colocando sus estilos respectivos

Gabriela
Gabriela

Todo genial, funciona muy bien, eres un capo, ¡Muchas gracias! Solo una ayudita y una consulta para aquellos que lo usen: La ayudita: El código html esta en “body” por lo que ocupará un espacio (la idea es ocultarlo) y si este espacio les aparece en su pagina entonces no está ocultado. Verifiquen esta línea: #popup { margin-top: -300px;} esto lo esconde, ya no habrá espacios vacíos y ahora si solo aparecerá cuando se llama al enlace. Verán que aparece desde arriba, es porque ahí está escondido, arriba donde no se ve. Mi consulta es que al salir del popup,… Leer más »

mercedes
mercedes

Hola
como puedo hacer que estas ventanas emergentes se cierren de forma automatica cuando se ha cargado una pagina, la famosa “loading”, podeis ayudarme

Ifrahin
Ifrahin

En mi caso falla … se crea um loop em href=”#” que deve salir y retornar al index.htlm ….. existe alguna alguna solución?

Pastor Alcantara
Pastor Alcantara

Me funciona a la perfección,Gracias

Francisco
Francisco

No me funciona el cerrar (X), porque puede ser?
Todo lo demás anda bien

polin
polin

Muchas gracias… ha sido de gran ayuda!

Juan de la Barrera
Juan de la Barrera

Estoy tratando de colocar mas de dos ventanas modales en una pagina, el problema es que si le cambio el id el modal se muestra en la pagina como si fuera cualquier imagen. Alguien sabe como poner mas de 2 ventanas modales en una pagina?, espero y me puedan ayudar. Saludos.

Chris
Chris

¡Genial!
Solo agregué “position: absolute;” al #popup {} y quedó de lujo.

Chris
Chris

¡Genial!
Solo agregué position: absolute al #popup {} y quedó de lujo.

ivan zapata
ivan zapata

Gracias