Setting a cookie to only show popup once

Question

I'm trying to setup a cookie to only show a popup once, here's my code so far:

jQuery(window).load(function(){
    // Load pop up within parent-page section only
    if (window.location.href.indexOf('parent-page') > -1) {

        alert("your url contains the parent-page in the URL");

        $.magnificPopup.open({
            items: [
                {
                    src: '#disclaimer', // CSS selector of an element on page that should be used as a popup
                    type: 'inline'
                }
            ],
            removalDelay: 300,
            mainClass: 'mfp-fade',
            closeOnContentClick: false,
            modal: true
        });
    }
});

Currently this loads every time parent-page is in the URL, I need to only show it once. How can I do this?

As you said either by storing the seen state in a cookie or local storage! Do you have some code along that path? — lshettyl, Jun 17 '15 at 09:43
Depends do you want that it not appear for the current session or for x days? — Emanuele Parisio, Jun 17 '15 at 09:45

score 4 · Answer 1 · answered Jun 17 '15 at 09:47

4

You can use the jQuery cookie plugin to achieve this:

if (window.location.href.indexOf('parent-page') > -1 && !$.cookie('popup-shown')) {
    $.magnificPopup.open({
        items: [
            {
                src: '#disclaimer', // CSS selector of an element on page that should be used as a popup
                type: 'inline'
            }
        ],
        removalDelay: 300,
        mainClass: 'mfp-fade',
        closeOnContentClick: false,
        modal: true
    });
    $.cookie('popup-shown', true);
}

answered Jun 17 '15 at 09:47

Rory McCrossan

331,213
40
305
339

Thanks for the answer. As this uses a plugin, which I'm sure works great, I don't particularly fancy loading another plugin on to my site if I can achieve this using local storage like the other answer suggests. – egr103 Jun 17 '15 at 09:57
Yes, @Tushar's answer will work well too. Note that if you want to avoid using another plugin you can use [these functions](http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) to get/set cookies yourself using native JS. – Rory McCrossan Jun 17 '15 at 09:58

score 3 · Accepted Answer · answered Jun 17 '15 at 09:47

You can use localStorage:

jQuery(window).load(function () {
    if (window.location.href.indexOf('parent-page') > -1 && !localStorage.getItem('popup_show')) {

        $.magnificPopup.open({
            items: [{
                src: '#disclaimer', // CSS selector of an element on page that should be used as a popup
                type: 'inline'
            }],
            removalDelay: 300,
            mainClass: 'mfp-fade',
            closeOnContentClick: false,
            modal: true
        });

        localStorage.setItem('popup_show', 'true'); // Set the flag in localStorage
    }
});

The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends - that is when the browser is closed.

Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

This works great is there a way I can set the cookie to expire in say 10 days? — egr103, Jun 17 '15 at 09:55

Setting a cookie to only show popup once

2 Answers2

Linked

Related