Establecer una cookie jQuery para mostrar ventanas emergentes una sola vez

Question

Soy un novato absoluto en jQuery. Estoy aprendiendo, pero hay un mensaje de Navidad que debo ponerme en funcionamiento enseguida.

He incluido estos en la cabecera de la página:

<script type="text/javascript" src="scripts/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>` 

Luego sigue el mensaje usando una ventana emergente jQuery. Aquí está:

<script type="text/javascript"> 
$(document).ready(function() { 
     var id = '#dialog'; 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set height and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.7); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2-220); 

     //transition effect 
     $(id).fadeIn(2000);  

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });  

}); 

</script> 

En el body He puesto el mensaje:

<div style="top: 199.5px; left: 200px; display: none;" id="dialog" class="window"> 
XMAS MESSAGE 
<a href="#" class="close">Shut this popup.</a> 
</div> 

Hasta aquí todo bien. El siguiente paso sería no aburrir a mis visitantes con el mismo mensaje una y otra vez (posponer por sesenta días sería suficiente).

por lo que quiero establecer una cookie usando la cookie plug-in de jQuery:

function setCookie() { 
    $.cookie('test_status', '1', { path: '/', expires: 60 }); 
    return false; 
} 

que luego se encontró la próxima vez que un usuario realiza la misma página y el mensaje de Navidad no se muestra hasta que el mensaje caduca .

Ahora if-else declaraciones son el tipo superior de jQuery con el que aún no estoy familiarizado. Entonces, ¿alguien podría explicarme?

Answer 1

Algo de este tipo podría ser de ayuda:

 
$(document).ready(function(){ 
    if ($.cookie('test_status') != '1') { 
    //show popup here 
    $.cookie('test_status', '1', { expires: 60}); } 
    }); 

Answer 2

puede probar esta

$(document).ready(function() { 
    if ($.cookie('test_status')) { 
     return; 
    } 

    //Rest of your code here 
}); 

Answer 3

que tenía el mismo problema y me encontré con esta solución:

$(document).ready(function() { 
    var cookie = document.cookie; 
    if (cookie == "") { 
     //show popup depending on url 
     var url = window.location; 
     if (url != "http://localhost/test/jquery-popup.html") {          
      setTimeout(function() { 
       $.fn.colorbox({ html: '<div style="width:301px;height:194px;"><a href="http://livebook.in/"><img src="res/homer.jpg" style="width:301px;height:194px;" alt="The linked image" /></a></div>', open: true }); 
      }, 500); 
     }else { 
      setTimeout(function() { 
       $.fn.colorbox({html:'...', open:true}); 
      }, 500); 
     } 

     //set timeout for closing the popup 
     setTimeout(function() { $.fn.colorbox.close(); }, 3000); 

     //set cookie 
     var d = new Date(); 
     d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); //expire in 30 days 
     var expires = "expires=" + d.toGMTString(); 
     document.cookie = "apparsoYES" + "=" + "YES" + "; " + expires;  
    } 
}); 

este script crea una ventana emergente en la carga de la página, la cierra automáticamente, crea una cookie para que el popoup se muestre solo una vez y puede mostrar dif ventanas emergentes dependiendo de la página

Answer 4

Supongo que lo que estás buscando es que cuando un nuevo usuario visita tu Webpage, muestres una ventana emergente, pero mientras navega por otras páginas, la ventana emergente no debería aparecer.

Es muy fácil de lograr a través de cookies, comprobar este ejemplo de código, esto le ayudará a

Así que estoy incluyendo el fragmento de código utilizado (también se puede seguir el siguiente enlace para el mismo)

Así , la parte de la escritura es

var expDays = 1; // number of days the cookie should last 

var page = "only-popup-once.html"; 
var windowprops = "width=300,height=200,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes"; 

function GetCookie (name) { 
var arg = name + "="; 
var alen = arg.length; 
var clen = document.cookie.length; 
var i = 0; 
while (i < clen) { 
var j = i + alen; 
if (document.cookie.substring(i, j) == arg) 
return getCookieVal (j); 
i = document.cookie.indexOf(" ", i) + 1; 
if (i == 0) break; 
} 
return null; 
} 
function SetCookie (name, value) { 
var argv = SetCookie.arguments; 
var argc = SetCookie.arguments.length; 
var expires = (argc > 2) ? argv[2] : null; 
var path = (argc > 3) ? argv[3] : null; 
var domain = (argc > 4) ? argv[4] : null; 
var secure = (argc > 5) ? argv[5] : false; 
document.cookie = name + "=" + escape (value) + 
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
((path == null) ? "" : ("; path=" + path)) + 
((domain == null) ? "" : ("; domain=" + domain)) + 
((secure == true) ? "; secure" : ""); 
} 
function DeleteCookie (name) { 
var exp = new Date(); 
exp.setTime (exp.getTime() - 1); 
var cval = GetCookie (name); 
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); 
} 
var exp = new Date(); 
exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); 
function amt(){ 
var count = GetCookie('count') 
if(count == null) { 
SetCookie('count','1') 
return 1 
} 
else { 
var newcount = parseInt(count) + 1; 
DeleteCookie('count') 
SetCookie('count',newcount,exp) 
return count 
    } 
} 
function getCookieVal(offset) { 
var endstr = document.cookie.indexOf (";", offset); 
if (endstr == -1) 
endstr = document.cookie.length; 
return unescape(document.cookie.substring(offset, endstr)); 
} 

function checkCount() { 
var count = GetCookie('count'); 
if (count == null) { 
count=1; 
SetCookie('count', count, exp); 

window.open(page, "", windowprops); 

} 
else { 
count++; 
SetCookie('count', count, exp); 
    } 
} 

Y después será el órgano de DOM,

<BODY OnLoad="checkCount()"> 

http://www.jsmadeeasy.com/javascripts/Cookies/Only%20Popup%20Once/index.htm

Answer 5

Primero incluya la biblioteca jquery.

Después de incluir el script siguiente para las cookies en jquery.

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

Ahora poner el siguiente código en el pie de página:

$(document).ready(function() { 
     // initially popup is hidden: 
     $('#stay-in-toch.popup-outer').hide(); 
     // Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie. 
     // The cookie will expire and every 2 days and the dialog will show again. 
     if ($.cookie('whenToShowDialog') == null) { 
      // Create expiring cookie, 2 days from now: 
      $.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' }); 

      // Show dialog 
      $('#stay-in-toch.popup-outer').show();  
     } 
    });