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

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

Estilizar nuestra popup con CSS

Creamos el estilo para popupbody.

#popupBody{
}

Le ponemos un ancho 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 su 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;
font-weight: bold;
text-decoration: none;
color: #F00;

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

transition: all 200ms;

Y este es el resultado final

Ventanas popup con puro CSS y sin JavaScript, CableNaranja

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

Podría también gustarte...

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

Deja un comentario

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

shares