Ventana emergente cada 24 horas con Jquery

3 de Octubre - en JavaScript

En ocasiones es necesario mostrar un  mensaje al usuario cada cierto tiempo, en este caso puede ser publicidad, un mensaje pidiendo que comparta nuestra página, o que se suscriban al newsletter. Para lograrlo se utilizar la librería de Jquery y JS-Cookie de JavaScript.

PopUp con JQuery

Creando la ventana de manera dinámica

El contenido HTML sera añadido de forma dinámica, para esto utilizaremos la función prepend, la cual inserta un contenido específico al inicio del elemento seleccionado, en este caso será el elemento body. La estructura HTML será la siguiente:

<!-- Fondo de la ventana -->
<div id="fondo"></div>
<div id="ventana">
	<h3>Mensaje<div id="cerrar"></div></h3>
	<!-- Contenido del mensaje -->
	<div class="contenido">
		Bienvenido a mi página
		<div id="time"></div>
	</div>
</div>

Estilos CSS:

#fondo{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: fixed;
	cursor: pointer;
}
#ventana{
	width: 400px;
	height: 250px;
	background: #e6eaee;
	position: fixed;
	left: 50%;		
	margin-left: -200px;
	margin-top: -125px;
}
#ventana h3{
	width: 94%;
	padding: 2% 3%;
	margin: 0;
	text-align: left;
	background: #7396ff;
	color: #fff;
	margin-bottom: 20px;
}
#cerrar{
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAtElEQVQ4jaWSQRGDMBRElxpAQiUgpRKQgoRKiIRKQELqAAmZKng9kAyh5P8c+m5M/luSTSRJwAS8gACMcgCWPDupkhMH0QrJPygkYBKwciV25MJmBQCEjgywto5wCnHk/QhGDz0OudrmyF5gjwjcrSvqhVxu6FZ/DMPwkfR2nsE7z7TBLqwm/CO3Qxw5Op2EIi+OPOIX+5SxmKjadkKSgEdDPj8SO2Qui3MWt5b8E7Lm2VmSvoHNt6Fnva9zAAAAAElFTkSuQmCC') no-repeat;
	width: 16px;
	height: 16px;
	float: right;
	margin-top: 3px;
	cursor: pointer;
}
.contenido{
	text-align: center;
	padding: 10px;
	margin: 10px 0;
	font-size: 18px;
}
#time{
	font-size: 13px;
	margin-top: 9px;
}

Funciones de  control para la ventana:

La ventana emergente podrá cerrarse haciendo clic en el fondo o  con el botón cerrar.

//Cerrar la ventana ocultando los elementos
function Cerrar(){
	$("#fondo, #ventana").hide();
}

//Insertando el contenido HTML al inicio del body
$('body').prepend('Estructura HTML...');

		
//Cerrar la ventana al dar clickc en el fondo o en el boton de cerrar
$("#fondo, #cerrar").click(function(){
	Cerrar();
});

Uso de Cookies para guardar datos en el navegador de usuario

Recurriremos a la librería JS-Cookie, para crear, recuperar y borrar las cookies. Las funciones básicas que utilizaremos son las siguientes:

Cookies.set('nombre','valor',{expires: 1}); //Crear una cookie con 1 dia de caducidad

Cookies.get('nombre');//Recuperando el valor

Cookies.remove('nombre');//Eliminando la cookie

Para controlar que el mensaje solo se muestre una vez cada 24 horas, utilizaremos una cookie la cual llamaremos “msj”, inicialmente verificaremos si existe, al ser la primera vez que el usuario entra a la página, esta no existirá por lo tanto mostraremos el mensaje. Cuando el usuario vuelva visitar la página, esta existirá por lo que el mensaje no será mostrado.

Para determinar el intervalo de tiempo para mostrar el mensaje nuevamente, indicaremos una fecha de caducidad para la cookie, en este caso será de 1 día o 24 horas.

//Recuperando el valor de la cookie "msj", si es que existe
var cook = Cookies.get('msj');
	
//Verificar si la cookie existe, y si su valor es correcto el mensaje no sera mostrado
if(cook=='1')
		$('#respuesta').html('Ya has visto este mensaje.');
else {
	//Monstrando el mensaje
	
	//Creando la cookie "msj", indicado 1 dia o 24 horas de caducidad
	Cookies.set('msj', '1',{expires: 1});
}

Creando un retardo antes de mostrar la ventana

Para los usuarios puede ser molesto que una ventana se muestre inmediatamente al ingresar a la página, por lo cual añadiremos un retardo de tiempo antes de mostrar el mensaje, además un contador hacia atrás el cual cerrara la ventana automáticamente al no recibir respuesta del usuario.

Para crear el retardo usaremos la función setTimeout(), la cual llama a una función después de transcurrir un lapso de tiempo determinado:

var retardo = setTimeout(function(){
	//Codigo a ejecutar
}, 2000);

Utilizaremos la función setInterval(), la cual ejecuta una función cada determinado tiempo, en este caso será un contador en retroceso, el cual al llegar a cero cerrara la ventana automáticamente:

var c = 10;//Tiempo en segundos

//Temporizado para cerrar la ventana, actualizado cada segundo
var iter = setInterval(function(){	
	if((c--)<=0){//Al llegar a 0, elimina el contador y cierra la ventana
		clearInterval(iter);//Uso de clearInterval para eliminar el contador
	}
}, 1000);

Todo el código implementado junto:

$(document).ready(function(){	

	//Recuperando el valor de la cookie "msj", si es que existe
	var cook = Cookies.get('msj');
	
	if(cook=='1')//Si existe y el valor es correcto, el mesaje ya se ha visualizado
		$('#respuesta').html('Ya has visto este mensaje.');
	else
	//Temporizador que ejecutara la funcion "mensaje", despues de 5000 milisegundos
	var espera = setTimeout(function(){
		
		//Funcion que cerrara la ventana, ocultando los dos elementos
		function Cerrar(){
			$("#fondo, #ventana").hide();
			clearInterval(iter);
		}
		
		clearTimeout(espera);//Borrando el temporizador
		
		//Creando la cookie "msj", indicado 1 dia o 24 horas de caducidad
		Cookies.set('msj', '1',{expires: 1});
		
		//Mensaje
		var html =  '<div id="fondo"></div>'+
					'<div id="ventana">'+
						'<h3>Mensaje<div id="cerrar"></div></h3>'+
						'<div class="contenido">'+
							'Bienvenido a mi página'+
							'<div id="time"></div>'+
						'</div>'+
					'</div>';

		//Insertando el contenido HTML al inicio del body
		$('body').prepend(html);
		
		//Animacion de la ventana
		$('#ventana').animate({'top':'40%'}, 300);
		
		//Cerrar la ventana al dar clickc en el fondo o en el boton de cerrar
		$("#fondo, #cerrar").click(function(){
			Cerrar();
		});
		
		//Tiempo en segundos, para la cuenta atras antes de cerrar la ventana
		var c = 10;

		//Temporizado para cerrar la ventana automaticamente, actualizado cada segundo
		var iter = setInterval(function(){
			$('#time').html('Cerrando automaticamente en '+c+'s');
			if((c--)<=0) Cerrar();//Cerrando y borrando el intervalo
		}, 1000);		
	}, 2000);	
	
	//Borrar la cookie
	$("#borrar").click(function(){
		Cookies.remove('msj');
		$('#respuesta').html('Puedes volver a ver el mensaje, recarga la página.');
	});

});	

Ejemplo

DemoDescargar
Compartir