Cómo mostrar una ventana modal pasado un tiempo dado

En el siguiente artículo, os mostraré cómo abrir una ventana modal en una página web después de un corto espacio de tiempo. Esto puede ser muy útil a la hora de resaltar una llamada a la acción específica, como suscribirse a un newsletter u obtener likes de Facebook. Algunos sitios utilizan esta técnica para mostrar publicidad.

Pero antes de continuar, tómate tu tiempo en preguntarte si esto es algo que necesites implementar. Cada vez que estoy navegando por un sitio web y se me abre una ventana modal sin haber hecho clic sobre algo, la cierro de inmediato porque me molesta haberme desconcentrado de lo que estaba viendo en la web por culpa del dichoso modal. Personalmente pienso que estas técnicas son muy intrusivas para la experiencia de navegación del usuario, y creo que la mejor manera de generar visitantes es tu contenido, y si los alejas de esta manera...

Implementación básica

¿Continúas? Ok, supongo que quieres llevarlo a cabo, así que vamos a ver cómo implementarlo. Para este tutorial utilizaré el plugin Colorbox para mostrar el modal. Colorbox se basa en jQuery, por lo que también tendrás que añadir la librería a tu página. Aquí tienes la plantilla:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Delayed modal demo</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
  </head>
  <body>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script>
    <script>
      <!-- Code here -->
    </script>
  </body>
</html>

Ojo, estoy utilizando varios CDNs para incluir los scripts, pero también puedes instalar las dependencias utilizando un gestor de paquetes como npm o bower.

Mostrando el modal

Normalmente, asignamos Colorbox a un elemento HTML y le pasamos la configuración en forma de clave-valor dentro de un objeto:

$(selector).colorbox({
  key:value, 
  key:value
});

Pero bueno, lo que nosotros queremos hacer es llamar al colorbox directamente (sin asignarlo a nada), por lo que la sintaxis es un poco distinta:

$.colorbox({
  key:value, 
  key:value
});

Colorbox cuenta con un montón de opciones (muchas relacionadas co mostrar imágenes) que te permiten personalizar cuanto quieras tu ventana modal. En el siguiente ejemplo especifico las dimensiones de la ventana, le doy un nombre de clase (que me permite personlizarla utilizando CSS) y le paso una cadena HTML para mostrarla dentro. Puedes ver la lista de opciones completa desde este enlace.

$.colorbox({
  html:"<h2>Call For a Free Quote</h2>",
  className: "cta",
  width: 350,
  height: 150
});

Ahora debes usar la función de Javascript setTimeout para llamar al código después del periodo de tiempo que tengas acordado. SetTimeout es un función nativa de Javascript, que llama o ejecuta código de Javascript después de un tiempo específico en milisegundos.

setTimeout(function(){
  $.colorbox({
    html:"<h2>Call For a Free Quote</h2>",
    className: "cta",
    width: 350,
    height: 150
  });
}, 10000);

El popup se abrirá después de que tus visitantes hayan navegado por la página pasados 10 segundos.

Sobre la accesibilidad

Hay un montón de aspectos a tratar sobre accesibilidad cuando hablamos de ventanas modales en la web. Por ejemplo: ¿puede el teclado interactuar con ella?, ¿el diseño es semántico?, ¿es sencilla de cerrar? Colorbox viene con un montón de estas características, así vamos a mejorar unas cuantas cositas en nuestra ventana modal.

Cambiando el focus

Cuando la ventana modal se abre, Colorbox centra el focus en la misma ventana. Esto es bueno, pero si hay elementos interactivos en el modal (por ejemplo, un elemento input) debemos considerar el focus en dicho elemento. Esto significa ahorrar un clic de ratón a los usuarios y ahorrar un apretado de tecla a aquella gente que utiliza un teclado. Podemos llevar a cabo esto mediante el método focus de Javascript.

También debemos hacer uso del evento OnComplete que Colorbox nos proporciona, para asegurarnos que nuestro contenido ha sido cargado.

$.colorbox({
  ...
  onComplete: function(){ $("#myInput").focus(); }
});

Recordando donde estaba el usuario previamente

Después de que el usuario cierre el popup, es un detalle devolver al usuario donde estaba previamente en la página. Para implementar esto, necesitamos traquear el elemento más reciente con el que el usuario ha interactuado y resetear el focus a dicho elemento una vez que el modal se ha cerrado.

var lastFocus;

setTimeout(function(){
  lastFocus = document.activeElement;

  $.colorbox({
    ...
    onClosed: function(){ lastFocus.focus(); }

  });
}, 2000);

Mostrar el modal una vez cada X horas

Por el bien de la usabilidad de nuestro sitio web, no es bueno mostrar el modal cada vez que el usuario visite nuestra web. Lo suyo sería mostrarlo una vez cada X horas, o una vez cada X días.

Una forma de llevar a cabo esto es definiendo una cookie cuando se muestre el modal, haciéndola expirar después de un tiempo específico. A continuación, comprobamos si existe esa cookie al cargar la página y actuamos en consecuencia.

Para ello, necesitamos un conjunto de funciones para el manejo de cookies. Recomiendo utilizar JS para esta tarea.

Incluye este código en tu página después de haber incluido la librería Colorbox:

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>

En este punto, tiene sentido empezar a mover varias parte del código a sus respectivas funciones:

var lastFocus;

function onPopupOpen(){
  $("#myInput").focus();
}

function onPopupClose(){
  Cookies.set('colorboxShown', 'yes', { expires: 1 });
  lastFocus.focus();
}

function displayPopup(){
  $.colorbox({
    html:"<h2>Call For a Free Quote</h2>",
    className: "cta",
    width: 350,
    height: 250,
    onComplete: onPopupOpen,
    onClosed: onPopupClose
  });
}

setTimeout(function(){
  var popupShown = Cookies.get('colorboxShown');

  if(popupShown){
    console.log("Cookie found. No action necessary");
  } else {
    lastFocus = document.activeElement;
    displayPopup();
  }
}, 2000);

Fuente: sitepoint.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP