web-dev-qa-db-fra.com

Définir un cookie jQuery pour afficher le menu contextuel une seule fois

Je suis un débutant absolu dans jQuery. J'apprends, mais il y a un message de Noël que je dois être opérationnel en un rien de temps.

J'ai inclus ceux-ci dans l'en-tête de la page:

<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>`

Suit ensuite le message à l'aide d'une fenêtre contextuelle jQuery. C'est ici: 

<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>

Dans la body j'ai mis le message: 

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

Jusqu'ici tout va bien. La prochaine étape consisterait à ne pas ennuyer mes visiteurs de retour avec le même message à plusieurs reprises (un délai de soixante jours suffirait). 

Je souhaite donc définir un cookie à l'aide du plug-in jQuery Cookie:

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

Ce qui est ensuite trouvé lors de la prochaine visite d'un visiteur sur la même page et le message de Noël n'apparaît pas avant l'expiration du message.

Maintenant, les instructions if-else sont le type supérieur de jQuery que je ne connais pas encore. Alors, est-ce que quelqu'un pourrait me l'expliquer?

jquerycookiesif-statementpopup
17
Peter Amsterdam

Quelque chose de ce genre pourrait être utile:

 $ (document) .ready (function () {
 if ($ .cookie ('test_status')!! = '1') {
 // affiche le popup ici. test_status ',' 1 ', {expires: 60});} 
});
14
Sudhir Bastakoti

Commencez par inclure la bibliothèque jQuery.

Après avoir inclus le script ci-dessous pour les cookies dans jQuery.

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

Maintenant, mettez le code ci-dessous dans le pied de page:

$(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();       
        }
    });
3
Amit Naraniwal

Tu peux essayer ça

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

    //Rest of your code here
});
2
ShankarSangoli

Je suppose que ce que vous recherchez, c’est que lorsqu'un nouvel utilisateur visite votre Webpage, vous affichez une fenêtre contextuelle, mais lorsqu'il navigue dans d'autres pages, la fenêtre contextuelle ne devrait pas apparaître.

C’est très facile à réaliser grâce à cookies, consultez cet exemple de code, cela vous aidera à 

Donc, je suis notamment l'extrait de code utilisé (vous pouvez également suivre le lien ci-dessous pour la même chose)

Donc, la partie script est

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);
   }
}

Et suivra le corps de DOM,

<BODY OnLoad="checkCount()">

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

0
iamabhishek

J'ai eu le même problème et j'ai trouvé cette solution:

$(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;    
    }
});

ce script crée un popup lors du chargement de la page, le ferme automatiquement, crée un cookie pour que le popoup ne soit affiché qu'une seule fois et puisse afficher différents popups en fonction de la page

0
Mma87