Crear una ventana modal sólo con CSS

Hay varias formas de crear una ventana modal o pop-up, o cómo quieras llamarlo.

Se puede hacer con herramientas de javascript, usando jQuery o simplemente con CSS. Vamos a hacer con CSS puro y después podemos introducir algo de JavaScript si por ejemplo usas BootsStrap.

Creamos la llamada a la venta modal con un enlace <a href=»»></a>.

<a href="#miModal">Abrir Ventana</a>

Ahora creamos el código que mostrará la modal.

<div id="miModal" class="modal">
      <div class="modal-content">
        <a href="#" class="close">X</a>
        <h2>Contenido del Modal</h2>
        <h4>¡Pon ritmo a la vida!</h4>
      </div>  
</div>

Pues ya tenemos nuestra ventana modal. Vamos a darle forma con CSS.

.modal {
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 1s;
    z-index: 9;
    padding-top: 2em;
}

Si te das cuenta el elemento opacity está en 0, por lo que no se muestra. Para conseguir que se vea usamos la pseudo-clase :target que se lo aplicamos al enlace que llama a la modal. Le aplicamos la pseudo-clase a través del id de la modal con el elemento css de almohadilla #. Así:

#miModal:target {
    opacity: 1;
    pointer-events: auto;
}

Y hasta aquí estaría todo para hacer que funcione nuestra modal. Ésta se cerrara cuándo le des a la «X» que es un enlace que no lleva a ninguna parte.

Es aquí cuando podrías tener algún problema dependiendo de para dónde y cuándo estés utilizando este código. Lo que quiero decir es que al cerrar la modal, si estás en una página dentro de tu web, la url quedaría así: https://www.tupaginaweb.com/pagina#

Vale no hay ningún problema por esto, puedes seguir navegando en la página si, pero si estuvieras en una web-app, o en la página tienes un formulario o acciones que pase los valores por el método GET, la url ya te ha cambiado por lo que no va a funcionar bien.

¿Como lo podemos arreglar? pues con JavaScript en el enlace de cierre del modal, introducimos la función de JavaScript onclick(); y le añadimos una clase css que contenga display: none;

Añadimos la clase en nuestra hoja de CSS si aún no la tienes creada:

.noShow {
  display: none;
}

Listo ahora le agregamos la función al elemento de cierre <a href=»»></a>

<a href="#" class="close" onclick="$('#miModal').addClass('noShow')">X</a>

Listo. Ahora ya está todo.

Tips: si estás usando Bootstrap, este framework ya viene con esta clase por defecto, se llama «d-none», así que no hace falta que te creas la clase «noShow», usa la que trae el Bootstrap por defecto y no la lies. 😉

Puedes ver un ejemplo pinchando AQUÍ

X

Contenido del Modal

¡Pon ritmo a la vida!

Por cierto, si trabajas en wordpress espero que ya sepas como introducirlo, si no, como se muestra en la imagen destacada de este artículo de «wordpress» usa el bloque html para crear tu modal.