Ventana modal con jQuery

En este tutorial vamos a ver cómo crear una ventana modal con jQuery que se muestre en forma de popup al pulsar un botón. En caso de que no conozcas jQuery, es recomendable que le eches un ojo al tutorial de introducción a jQuery.

Una ventana modal, es una ventana de diálogo que se suele mostrar en pantalla por encima del resto de los contenidos, Habitualmente, las ventanas modales bloquean el acceso al resto de los contenidos de la página hasta que se interactúa con ellas de algún modo. Se utilizan a modo de reemplazo de los mensajes de alerta alert() de cualquier navegador, de forma que se obtenga una ventana más homogénea y personalizable.

Antes de comenzar, incluye jQuery en tu proyecto y luego sigue los pasos que ves a continuación.

Versión simplificada

Vamos a crear primero una versión simple que apenas tenga estilos asociados. Es habitual que las ventanas modales se muestren sobre una cobertura u overlay que difumine de algún modo el contenido de la página. De este modo se da a entender que el usuario debe interactuar con la ventana. Es por ello que agregaremos primero un div al que asignaremos la clase .overlay.

Seguidamente vamos a agregar la ventana, que tendrá la clase .modal y también un botón que permita abrirla. En la ventana, también habrá un botón que permita cerrarla:

<h1>Modal</h1>

<div class="overlay"></div>

<div class="modal">
  <h2>Modal</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <button class="close">Close</button>    
</div>
<button class="open">Open</button>

Seguidamente, vamos a agregar el código jQuery, que constará de una acción que asigne la clase .active tanto al overlay como a la ventana cuando hagamos clic en el botón de apertura. También agregaremos otra que que elimine la clase .active de ambos elementos al pulsar el botón de cierre.

$(".open").on("click", function(){
  $(".overlay, .modal").addClass("active");
});

$(".close, .overlay").on("click", function(){
   $(".overlay, .modal").removeClass("active");
});

A continuación vamos a definir los estilos CSS. La parte más relevante está en la clase .active que se alterna la visibilidad del overlay y de la ventana modificando su z-index y su propiedad visibility respectivamente. También se modificará su opacidad para crear una transición.

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .3s ease;
  z-index: -1; 
  background: #000;
}

.overlay.active {
  opacity: 0.5;
  z-index: 2;
}

.modal {
  color: #fff;
  background: #000;
  max-height: calc(100% - 100px);
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 450px;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
  transition: .3s ease;
}

.modal.active {
  visibility: visible;
  z-index: 2;
  opacity: 1;
}

Y con esto ya estaría lista una versión básica de nuestra ventana modal. Puedes ver el resultado en funcionamiento aquí.

Versión avanzada

Partiendo de la versión simplificada, vamos a añadir una acción más, de modo que la ventana también se cierre cuando pulsemos la tecla ESC:

$(document).keyup(function(e) {
  if (e.keyCode === 27) {
    $(".overlay, .modal").removeClass("active");
  }
});

Vamos a agregar también ciertos estilos CSS para que no parezca que la ventana modal es de hace 20 años:

html {
	min-height: 100%;
	font-family: 'Nunito', sans-serif;
}

body {
  background: #7db4fc;
  line-height: 1.5;
  text-align: center;
}

h1 {
  font-weight: 200;
  font-size: 3rem;
  color: white;
  text-align: center;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: .5s ease;
  z-index: -1;
}

.overlay.active {
  opacity: 1;
  z-index: 2;
}

.modal {
  max-height: calc(100% - 100px);
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 450px;
  transform: translate(-50%, -50%);
  color: #4a5666;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  transition: .5s ease;
}

.modal h2 {
  margin: 0;
  font-weight: 400;
  padding: 1rem;
  border-bottom: 1px solid #DDE0E7;
}

.modal p {
  padding: 1rem;
}

.modal.active {
  visibility: visible;
  opacity: 1;
}

button {
  display: inline-block;
  background: rgba(10, 20, 30, .3);
  border: 1px solid transparent;
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  border-radius: 45px;
  margin: .25rem 0;
  vertical-align: middle;
  line-height: 1;
  overflow: visible;
  cursor: pointer;
}

button:hover {
  border: 1px solid rgba(255, 255, 255, .8);
  color: white;
  background: rgba(255, 255, 255, .1);
}

button.close {
  margin: 0 0 1rem;
  background: #FC6468;
}

button.close:hover {
  border: 1px solid #FC6468;
  color: #FC6468;
  background: transparent;
}

Y tal y como puedes ver en el resultado final, el aspecto de nuestro ventana ha mejorado bastante. Puedes ver el resultado en funcionamiento aquí.

---