Ventanas popup con puro CSS y sin JavaScript, CableNaranja

Crear ventanas popup con puro CSS y sin JavaScript

¡Comparte nuestro contenido!

¡Haz clic para puntuar esta entrada!
(Votos: 6 Promedio: 3.7)

Para crear ventanas de tipo popup / diálogo, muchos desarrolladores recurrimos a frameworks y librerías como jQuery o Bootstrap, los más osados incluso recurren a JavaScript puro. En está ocasión vamos a ver como podemos crear una ventana popup simple y elegante sólo con HTML y CSS ¡Es muy fácil!

HTML necesario para nuestra ventana popup

Coloquemos un poco de HTML

<h1>Popup CSS sin JavaScript</h1>
<p>No es necesario JS </p>

Ahora el enlace que abrirá la popup

<p><a href="#popup">Abrir Popup</a></p>

Usaremos un <div> como nuestra ventana, tendrá una clase overlay que usaremos para el efecto modal, otro div para el cuerpo – popupBody – y otro para el contenido – popupContent. Adicionalmente usaremos un simple enlace con el id cerrar y el carácter especial times que mostrará una x.

<div id="popup" class="overlay">
            <div id="popupBody">
                <h2>Título de la ventana</h2>
                <a id="cerrar" href="#">&times;</a>
                <div class="popupContent">
                    <p>Este es el contenido</p>
                </div>
            </div>
        </div>

Así vamos al momento:

Ventanas popup con puro CSS y sin JavaScript, CableNaranja
Ventanas popup con puro CSS y sin JavaScript, CableNaranja

Ventana popup en modal

Creamos el archivo popup.css en nuestro editor favorito, y lo enlazamos en nuestro html

<link href="popup.css" rel="stylesheet" type="text/css" />

Primero definamos la clase overlay que hará el efecto modal. El truco consiste en poner fija la posición de la capa y sus 4 direcciones en 0. La propiedad visibility estará en hidden. La opacidad será 0 inicialmente, haciendo una simple transición de medio segundo.

.overlay { 
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

Para terminar el efecto modal, usaremos la pseudo clase target que funciona cuando un elemento está activo, como en este caso la clase overlay. Lo que haremos será simplemente poner la propiedad visibility en visible, y regresar la opacidad en 1.

.overlay:target{
  visibility: visible;
  opacity: 1;
}

Cuando le damos click al enlace, ya funciona en modal, pero al no tener color se ve extraño.

Ventanas popup con puro CSS y sin JavaScript, CableNaranja
Ventanas popup con puro CSS y sin JavaScript, CableNaranja

Estilizar nuestra popup con CSS

Creamos el estilo para popupBody

#popupBody{
}

Le ponemos un archo de 46% y un padding de 4%;

width: 46%;
padding: 2%;

Le aplicamos un borde redondo de 15 píxeles y una sombra de 5 píxeles, de color gris claro.

border-radius: 15px;
box-shadow: 0 0 5px #CCC;

Pintamos de color blanco el fondo, y cambiamos su posición a relative. También aplicamos un margen superior e inferior de 20% (se puede ajustar a gusto)

background: #FFF;
position: relative;
margin: 20% auto;

Después le aplicamos una transición de 5 segundos.

transition: all 5s ease-in-out;

Finalmente, necesitamos un estilo para el botón de cerrar.

#cerrar{
}

Cambiamos si posición a absolute y le damos 20 píxeles de arriba hacia abajo, y 30 píxeles de derecha a izquierda.

position: absolute;
top: 20px;
right: 30px;

Aumentamos la fuente un poco, la ponemos en negrita, eliminamos el borde inferior y cambiamos su color a rojo.

font-size: 30px;
fotn-weight: bold;
text-decoration: none;
color: #F00;

Por último, le ponemos un transición de 200 milisegundos.

transition: all 200ms;

Y este es el resultado final

Ventanas popup con puro CSS y sin JavaScript, CableNaranja
Ventanas popup con puro CSS y sin JavaScript, CableNaranja

Ventana popup que se abre automáticamente

Dado que ha solicitado mucho la solución a este dilema en los comentarios. Para que la ventana popup se abra de forma automática al iniciar la página y se pueda cerrar, tenemos que hacer lo siguiente:

Al botón de cerrar, lo hacemos apuntar al popup.

<a id="cerrar" href="#popup">&times;</a>

En el CSS, cambiamos las propiedades visibility a visible y opacity a 1 dentro de la clase .overlay

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: visible; /* Este valor se cambió de hidden a visible */
    opacity: 1; /* Este valor se cambió de 0 a 1 */
}

Se cambia .overlay:target a #popup:target y se invierten los valores de visibility y opacity.

#popup:target{
  visibility: hidden; /* Se regresa a hidden para ocultar */
  opacity: 0; /* Se regresa a o para hacerlo "invisible" */
}

Y con eso se soluciona el problema. Gracias a todos por la excelente respuesta que este tutorial ha tenido.

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Entradas relacionadas

79 comentarios en "Crear ventanas popup con puro CSS y sin JavaScript"

  1. …No soy programador de paginas web…Más bien aficionado y esa curiosidad me ha llevado a crear una cuantas web personales e incluso enmi trabajo lo cual la información interna sobre una variedad de ontroles administrativos han hecho que se visualicen más atractivos con respecto a sus aplicaciones originales Word, Excel y Db…Estoy muy complacido con lo que he hecho, pero, me faltaba agregar este tipo de ventanascomo elemento sorpresa hacia la visualización de la aplicación siguiente o consulta individual. Saludos y agradecido.

  2. Una consulta si quiero que la ventana se pueda cerrar al hacer click en cualquier parte que este fuera del contenido, es posible sin js??

      1. Israel gracias por el articulo, lo estoy implementando en una entrada de WordPress pero no me funciona, en un html aparte si funciona, sabes que puedo hacer para que funcione en WordPress?

    1. Ya conseguí que se abra pero en vez de ocupar el tamaño de toda la información que tengo en el div solo se ve un tamaño de 10px aprox. , y lo demás sale por fuera. Le puedo poner la altura manual pero no debería crearse solo dependiendo de la info que haya en el div?

        1. Saludos Israel, la propiedad no me funciona. Mi codigo tiene unos h3 que cada uno tiene su info. Yo escondo la info y con un click en el h3 aparece, el problema es que el popup crece pero cuando llega al final de la pantalla se corta y no deja ver el resto. Probé con un scroll y nada.

          1. Una cosa muy extraña, al cargar la pgina y darle al button pone /6#popup pero no me carga el popup sin embargo si dejo esto /6# me lo carga. Por que sucede esto?

  3. Hola, el popup aparece normal, pero al cerrarlo la página se devuelve a la parte superior. cómo hago para que quede en el mismo lugar en donde se le da abrir?

    1. Checa algunas de estas posibilidades:

      1. Crea un ancla en el lugar donde quieres que se quede.
      2. Juega un poco con la propiedad position de las capas

      Si sigue teniendo problemas, quizá ayudaría ver un poco de código.

  4. Como le hago para que la ventana popup quede encima de toda la informacion de mi pagina porq alguna text box quedan sobre el pop up

    1. Fabian, yo estaba lo mismo, lo solucione no de la mejor forma pero pues pude así, copie de nuevo las clases pero reemplazé todo con un 2 es decir, overlay2, #popupBody2 y tambien en el html, y asi me cambio el contenido.

  5. Buen día Israel muchas gracias por responder a todo muy interesante, tengo una pregunta, se puede hacer algo similar pero sin usar # es decir solo clases??

  6. Hola! Primero Gracias por compartir tus conocimientos!
    Tengo problemas con la opción para cerrar la ventana intente con:
    #cerrar:target {
    visibility: hidden;
    opacity: 0;
    }
    Pero no la cierra, alguna otra idea?? gracias!

  7. Excelente código! Una consulta, yo utilizo la ventana popup para mostrar un video de youtube. El video se reproduce bien, pero al momento de cerrar el popup, éste desaparece pero el audio del video se sigue escuchando. Como puedo hacer para que al momento de cerrar la ventana se detenga el video? No queda otra que javascript no?

    1. Saludos Claudio: Posiblemente, no he probado pero quizá esto te ayude:



      E invocas a la función así:


      video.addEventListener("click", function(evt){
      stopVideo();
      });

  8. Hola exelente tu explicacion del popup, me funciona de manera exelente y he podido aplicarlo en varios proyectos, pero me he topado con un detalle, hay usar el popup la informacion que coloco es algo considerable pero la posicion del popup queda muy abajo de la ventana como puedo ajustar la posicion del popup para que sea mas arriba, no se si me explique

    1. Saludos Luis, en la propiedad .overlay cambia los valores visibility a visible y opacity a 1, mira el ejemplo:


      .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 500ms;
      visibility: visible;
      opacity: 1;
      }

  9. Buen día!
    Hice el tutorial tal cual pero no se me abre el pop up, sólo se queda el texto “abrir pop up” pero nunca se abre.

      1. Ya lo solucioné 🙂
        Era un detalle en el CSS. Muchas Gracias, me sirvió bastante.
        Se podría usar esto mismo pero que pudieran quedar abiertas dos secciones o las tres al mismo tiempo? Es decir, que no se cierren a no ser que les vuelvas a dar click?

  10. Bueno arriba en el comentario te agradeci el post, pero me pasa lo mismo con que no se puede cerrar la ventana al momento de dejarla automatica, es decir que se despliegue apenas carga el html

  11. Hola amigo, felicitaciones por la grandiosa ayuda para los que estamos aprendiendo CSS. He aplicado el código que aqui proporciona y todo me funciona de maravilla, sin embargo necesito una pequeña ayuda para hacer que el contenido de popup (popupBody) aprarezca un scroll vertical y me permita desplazar y ver todo el contenido del mensaje en caso de que ese sea extenso, ya sea en un móvil, tablet o laptop. Muchas Gracias.

    1. Saludos nicolas

      Simplemente coloca la imagen con HTML ahí dentro del popup y se mostrará, por ejemplo:

      <div id="popup" class="overlay">
                  <div id="popupBody">
                      <h2>Título de la ventana</h2>
                      <a id="cerrar" href="#" rel="nofollow ugc">&times;</a>
                      <div class="popupContent">
                          <p>Este es el contenido</p>
      <img src='Aquí va la imagen' />
                      </div>
                  </div>
              </div>
      
  12. Buenas, me funciona perfecto, pero tengo una duda, como hago para que una vez cerrado el popup automatico no vuelva a abrirse cuando vuelva a esa pestaña

  13. hola esta muy bueno, pero en mi caso tengo un problema ya que el popup se queda cortado a la mitad y al tratar de bajar baja la pantalla de fondo(la pagina) mas el popup no

  14. Hola. Que tal! Excelente tu aporte, me ha funcionado perfecto. Tengo por ahora un problema, ojalá puedas orientarme, lo explico a continuación. En una texto html hago referencias a modo de enlaces que abren el popup, este a su vez realiza una consulta a una DB a través de php la cual se muestra en el popup. Hasta aquí todo bien, el problema está cuando uso la misma hoja de estilo en la misma página para otra referencia: me aparecen las dos consultas, una sobre otra. Espero haber expresado correctamente. Gracias por tu apoyo.

    1. Saludos Mak. Que bueno que te sirva. No estoy seguro de haber entendido lo último, pero si cambias la referencia al ID, es posible que por eso se estén encimando, si es cosa de CSS prueba a jugar con las propiedades visibility. Por ejemplo cuando cargues una referencia nueva cambia el visibility de la anterior a hidden y el de la nueva a visible.

      Espero te sirva y si, quizá con un ejemplo más concreto de tu problema podría ayudarte.

  15. Saludos Xamus. Gracias por compartir. tengo un percance y es que cuando lo quiero hacer en un lugar de mi página específicamente mas abajo a unos (por ejemplo) 3 mil px, cuando doy click y sale el popup sucede que todo el body o contenido de fondo regresa al inicio de la página, esto causa que para volver a donde estabas tienes que volver a bajar con el scroll al lugar… La idea es que se quede estático el fondo o en el mismo lugar cuando abra y cierre el popup, para así tener una buena navegabilidad y no perderse. Alguna idea… Agradecido de antemano por la ayuda.

  16. Saludos desde México he probado y leyendo los comentarios, en verdad funciono, solo que al finalizar no puedo cerrar la pop, ya probe en varios navegadores, alguien tiene o conoce alguna posible solucion?

    Saludos

  17. Buenas! espectacular tutorial me salvaste el día! te hago una consulta, yo lo programé para que el pop up salte automáticamente como bien vos lo explicas, ahora, es posible hacer que esa apertura se demore unos segundos? es decir, que no aparezca en el mismísimo instante que hablo el html sino que se demore unos segundos. Se puede configurar eso sólo con CSS?
    Mil gracias!! Saludos desde Argentina.

Responder a Enrique Ojeda Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *