Mostrar ventana modal automáticamente la primera vez que abra la página y controlar cantidad de veces a ser exhibido.

Hola amigos,

En este artículo vamos a ver como mostrar una ventana emergente (PopUp o Ventanas Modales) al cargar la página utilizando modal bootstrap de Twitter.
Lo interesante de este post es que controlaremos la cantidad de veces que será mostrado a los visitantes (usuarios) que acceden a nuestra página web.

La lógica para exhibir solamente la primera vez que el usuario accesa nuestra página es para que no quede aquella cosa molesta de estar cerrando ventanas por cada refresh (f5).

Para ello vamos utilizar Cookies.

Cookie: es una forma de salvar datos del lado del cliente con fecha para expirar.

La primera vez que el usuario abre la página iremos salvar una cookie con una duración X (usted lo decidirá) y siempre antes de exhibir el modal y salvar la cookie, vamos a verificar si esa cookie ya existe en el navegador del usuario, de existir es una señal de que el usuario ya visualizo la ventana emergente (PopUp o Ventanas Modales) y que no necesitamos exhibir nuevamente.

A continuación el código 😀

<?php
  # Iniciando la variable de control que permitirá mostrar o no el modal
  $exibirModal = false;
  # Verificando si existe o no la cookie
  if(!isset($_COOKIE["mostrarModal"]))
  {
    # Caso no exista la cookie entra aqui
    # Creamos la cookie con la duración que queramos
    
    //$expirar = 3600; // muestra cada 1 hora
    //$expirar = 10800; // muestra cada 3 horas
    //$expirar = 21600; //muestra cada 6 horas
    $expirar = 43200; //muestra cada 12 horas
    //$expirar = 86400;  // muestra cada 24 horas
    setcookie('mostrarModal', 'SI', (time() + $expirar)); // mostrará cada 12 horas.
    # Ahora nuestra variable de control pasará a tener el valor TRUE (Verdadero)
    $exibirModal = true;
  }
?>

Observación: es importante que este código php sea colocado en la cabecera de la página, ya que funciona de manera similar a las sesiones, es decir, que se encarga de las cabeceras HTTP, por lo que necesitan ser definidos antes de enviar cualquier HTML.

Con nuestro control de Cookies listo, ahora vamos a nuestro JS responsable de llamar a la función que mostrará el modal, vamos a utilizar nuestra variable de control $exibirModal que hemos creado anteriormente, nuestro código quedará de la siguiente manera;

  <?php if($exibirModal === true) : // Si nuestra variable de control "$exibirModal" es igual a TRUE activa nuestro modal y será visible a nuestro usuario. ?>
  <script>
  $(document).ready(function()
  {
    // id de nuestro modal
    $("#modalInicio").modal("show");
  });
  </script>
  <?php endif; ?>

En la cabecera ocurre lo siguiente,  si nuestra variable de control establecido en la parte superior con PHP “$exibirModal” es TRUE, creamos un JS que una vez que se carga la página será activada, y su contenido es para mostrar el modal.

En la siguiente llamada de la página como ya existirán las cookies, nuestra variable de control se establece con el valor FALSE, que es el valor por defecto que hemos creado para él, entonces la condición de ese If que creamos no será satisfactorio y el modal no se mostrará.

Recuerde que el modal aparecerá de nuevo cuando la cookie caduque.

Así que nuestro código final con PHP se verá así:

<?php
  # Iniciando la variable de control que permitirá mostrar o no el modal
  $exibirModal = false;
  # Verificando si existe o no la cookie
  if(!isset($_COOKIE["mostrarModal"]))
  {
    # Caso no exista la cookie entra aquí
    # Creamos la cookie con la duración que queramos
    
    //$expirar = 3600; // muestra cada 1 hora
    //$expirar = 10800; // muestra cada 3 horas
    //$expirar = 21600; //muestra cada 6 horas
    $expirar = 43200; //muestra cada 12 horas
    //$expirar = 86400;  // muestra cada 24 horas
    setcookie('mostrarModal', 'SI', (time() + $expirar)); // mostrará cada 12 horas.
    # Ahora nuestra variable de control pasará a tener el valor TRUE (Verdadero)
    $exibirModal = true;
  }
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mostrar Ventana Emergente</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
  <h2>Ejemplo</h2>
    <!-- Modal -->
    <div class="modal fade" id="modalInicio" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
       <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
         </div>
         <div class="modal-body">
           Some text in the modal.
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php if($exibirModal === true) : // Si nuestra variable de control "$exibirModal" es igual a TRUE activa nuestro modal y será visible a nuestro usuario. ?>
  <script>
  $(document).ready(function()
  {
    // id de nuestro modal
    $("#modalInicio").modal("show");
  });
  </script>
  <?php endif; ?>
</body>
</html>