it-swarm.com.de

Legen Sie ein jQuery-Cookie fest, um das Popup nur einmal anzuzeigen

Ich bin ein absoluter Neuling in jQuery. Ich lerne, aber es gibt eine Weihnachtsbotschaft, die ich in kürzester Zeit zum Laufen bringen muss.

Ich habe diese in die Kopfzeile der Seite eingefügt:

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

Anschließend folgt die Nachricht mit einem jQuery-Popup. Hier ist es: 

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

In der body habe ich die Nachricht eingefügt: 

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

So weit, ist es gut. Der nächste Schritt wäre, meine wiederkehrenden Besucher nicht immer mit derselben Botschaft zu langweilen (eine Verschiebung um 60 Tage wäre gut genug). 

Ich möchte also ein Cookie mit dem jQuery-Cookie-Plug-In setzen:

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

Welches wird dann gefunden, wenn ein Besucher das nächste Mal dieselbe Seite besucht und die Weihnachtsnachricht nicht angezeigt wird, bis die Nachricht abläuft.

Jetzt sind if-else-Anweisungen die höhere Art von jQuery, mit der ich noch nicht vertraut bin. Könnte es mir jemand erklären?

17
Peter Amsterdam

Etwas dieser Art könnte hilfreich sein:

 $ (Dokument) .ready (Funktion () {
 if ($ .cookie ('test_status')! = '1') {
 // Popup hier anzeigen 
 $ .cookie (' test_status ',' 1 ', {verfällt: 60});} 
}); 
14

Zuerst schließen Sie die Jquery-Bibliothek ein.

Fügen Sie anschließend das unten stehende Skript für Cookies in jquery ein.

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

Geben Sie nun den folgenden Code in die Fußzeile ein:

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

Sie können es versuchen

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

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

Ich schätze, nach was Sie suchen, wenn ein neuer Benutzer Ihre Webpage besucht, wird ein Popup-Fenster angezeigt. Wenn er jedoch auf anderen Seiten surft, sollte das Popup-Fenster nicht angezeigt werden.

Es ist sehr leicht durch cookies zu erreichen. Überprüfen Sie dieses Codebeispiel. Dies wird Ihnen helfen 

Ich füge also den verwendeten Code-Snippet hinzu (Sie können auch dem folgenden Link folgen)

Der Skriptteil ist also

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

Und das Folgende wird der Körper von DOM sein,

<BODY OnLoad="checkCount()">

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

0
iamabhishek

Ich hatte das gleiche Problem und fand diese Lösung:

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

dieses Skript erstellt beim Laden der Seite ein Popup-Fenster, schließt es automatisch und erstellt ein Cookie, sodass die Popup-Gruppe nur einmal angezeigt wird und je nach Seite unterschiedliche Popup-Fenster anzeigen kann

0
Mma87