Crear ventanas popup con puro CSS y sin JavaScript

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

¡Comparte nuestro contenido!

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!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

También te podría gustar...

55 Respuestas

  1. Enrique Ojeda dice:

    …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. Rosa Mora dice:

    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??

  3. Victor dice:

    Una pregunta, como puedo colocar un scroll bar dentro de dicho popup, esto en caso de que el contenido sea demasiado.

  4. sara dice:

    Buenas, mi no se me abre el popup, al hacer click se ve como carga la página y en la url se ve /2#popup pero no me lo abre. Que puede ser?

  5. Marcos Valera dice:

    Excelente amigo, gracias por su aporte.

  6. Jordan dice:

    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?

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

  7. John dice:

    Saludos! como hago para que el pop up me aparezca sin necesidad de dar clic en el boton. Gracias

  8. Alejandro dice:

    Muy interesante!, pregunta, hay forma de que el pop up, sea automatico? (ni bien entro en la web). gracias

  9. martin dice:

    Buenas quiero que el popup se visualice automaticamente al cargar en index

  10. EfrenQR dice:

    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

  11. Fabian dice:

    Disculpe, trato de usar varias veces la hoja de estilo, pero el contenido no cambia por más que lo intente, qué puedo hacer?🤔

  12. diego dice:

    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??

  13. Ricardo dice:

    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!

  14. Claudio dice:

    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?

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



      E invocas a la función así:


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

  15. Jhon Seyer dice:

    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

  16. luis dice:

    bien pero lo que quiero es que la ventana aparesca ni bien abres la pagina web.. sin apretar ningun enlace..porfvr

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

  17. Cristina dice:

    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.

  18. Luis dice:

    Hola estoy usando tus consejos y solo te escribo para agradecerte…es la unica solucion en la web y llevo dos dias buscando.

  19. Luis dice:

    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

  20. Luis dice:

    no no me funciona..al hacer clic en el valor de cerrar llama a “#” en el html y no lo cierra

Deja un comentario

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

shares