Set a jQuery cookie to show popup only once

问题

I'm an absolute newbie in jQuery. I'm learning, but there is a Christmas message that I need to get up and running within no time.

I've included these in the header of the 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>`

Then follows the message using a jQuery popup. Here it is:

<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 the body I've put the 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>

So far so good. The next step would be not to bore my returning visitors with the same message over and over (postpone for sixty days would be good enough).

So I want to set a cookie using the jQuery cookie plug-in:

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

Which is then found the next time a visitor hits the same page and the Christmas message is not shown till the message expires.

Now if-else statements are the higher kind of jQuery I'm not familiar with just yet. So, could anyone explain it to me?

回答1:

Something of this kind might be of help:

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

回答2:

First include the jquery library.

After include the below script for cookies in jquery.

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

Now put the below code into the footer :

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

You can try this

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

    //Rest of your code here
});

回答4:

I had the same problem and I found this 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;    
    }
});

this script creates a popup on page load, auto close it, creates a cookie so the popoup is showed only once time and can show different popups depending on the page

回答5:

I guess what you are looking for is, when a new user visits your Webpage, you show a pop up, but as he surfs through other pages, the pop window should not come up.

Its very easy to achieve through cookies, check this code sample, this will help you

So i am including the code snippet used(you can also follow the below link for the same)

So, the script part is

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

And following will be the body of DOM,

<BODY OnLoad="checkCount()">

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

来源：https://stackoverflow.com/questions/8405634/set-a-jquery-cookie-to-show-popup-only-once

标签

jquery

if-statement

popup