Prevent a triggering action using a cookie with JavaScript

Question

In a wordpress site I have a pop up window (for email capture) that is triggered by the "mouseleave" event.

The pop up works fine but Once the info is captured or the pop up window closed I dont want to bother the visitor with this pop up anymore. So I want to set a cookie which will detect that this event has already taken place and to not trigger again until a week or a month later for that visitor.

Here is the code:

<script>
    jQuery(document).ready(function() {
        jQuery('html').one("mouseleave", function(e){
            jQuery('.backdrop, .box').animate({'opacity': '.50'}, 300, 'linear');
            jQuery('.box, .box').animate({'opacity': '1.00'}, 300, 'linear');
            jQuery('.backdrop, .box').css('display', 'block');
            jQuery( this ).off( event );
            });
            jQuery('.close').click(function(){
                jQuery('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
                    jQuery('.backdrop, .box').css('display', 'none');
                    });
                });
                jQuery('.close').click(function(){
                    close_box();
                    });             
                jQuery('.backdrop').click(function(){
                    close_box();
                    });
    });

    function close_box()
    {
    jQuery('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
                    jQuery('.backdrop, .box').css('display', 'none');
    });
    }
</script>

Here is the HTML:

   <h1>THIS IS MY WEB PAGE </h1>



   <div class="backdrop"></div>
   <div class="box"><div class="close">X</div>
   <div class="box-content">
   THIS IS THE LIGHT BOX<br>

   <p>SOME INFO</p>
   </div>
   </div>

And this is the CSS:

.backdrop {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#000;
    opacity:.0;
    filter:alpha(opacity=0);
    z-index:50;
    display:none;
    }
.box {
    position: fixed;
    top: 20%;
    left:30%;
    background: url("box-img.jpg") repeat scroll 0 0 #fff;
    z-index:51;
    padding:10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 0px 5px #444444;
    box-shadow:0px 0px 5px #444444;
    display:none;
    height: 650px;
    width: 600px;
    }

.close {
    float:right;
    margin-right:6px;
    cursor:pointer;
    }

How can I accomplish that?

score 1 · Accepted Answer · edited May 23 '17 at 12:22

I've taken the liberty of wrapping your script in a no-conflict closure to improve readability and have moved any repeated calls to the jQuery object constructor for the same selector to separate variables.

Basically we use Window.localStorage (which is built into the browser and requires no extra plugins) to store information on the client side, but first we check to see if that cookie is already set and if it is, then if it is older than one month (or 2628000000 milliseconds)

I put all the functions inside the if statement so if the user has already seen the popup then nothing at all will happen.

_{Note: This is does not use cookies, for an explanation of the difference please see:

What is the difference between localStorage, sessionStorage, session and cookies?}

_{Edit: Because you requested in the (deleted) comments that you need this to run on separate pages independently I've included an object solution for this}

(function ($) {
    var storage = window.localStorage
    $(document).ready(function () {
        var poppedPages;
        if(!storage.poppedPages) {
            poppedPages = {}; 
        } else {
            poppedPages = JSON.parse(storage.poppedPages);
        }
        if(!storage.popped || !storage.poppedPages[location] || storage.popped - Date.now() > 2628000000) {
            // 2628000000 === One month's worth of milliseconds
            storage.popped = Date.now();
            poppedPages[location] = true; // insert a new property for the current page
            var backdropBox = $('.backdrop, .box')

            function open_box() {
                $('html').one("mouseleave", function (e) {
                    backdropBox.animate({
                        'opacity': '.50'
                    }, 300, 'linear');
                    $('.box, .box').animate({
                        'opacity': '1.00'
                    }, 300, 'linear');
                    backdropBox.css('display', 'block');
                });
                $('.close, .backdrop').one('click', close_box);
            }
            function close_box() {
                backdropBox.animate({
                    'opacity': '0'
                }, 300, 'linear', function () {
                    $('.backdrop, .box').css('display', 'none');
                });
            }

            open_box();
        }
        storage.poppedPages = JSON.stringify(poppedPages);
    });
})(jQuery);

@Agustin Local Storage is a key-value store and takes primitives so if you want to store an object or array of pages you'll have to stringify on input (e.g. storage.poppedPages = JSON.stringify(/*your object or array here*/); ) and then parse it on the way out (e.g. var localPoppedPages = JSON.parse(storage.poppedPages). Does that answer your question i the comment above? Remember you can directly store primitives like strings, numbers, dates, etc. no need to serialize them. — Paul Ryan, Jun 19 '15 at 02:12
@paullryan Thanks for that, I didn't know you couldn't store objects in localStorage (that makes a lot of sense now), I've updated my answer with JSON.stringify and JSON.parse — , Jun 19 '15 at 02:14

score 0 · Answer 2 · answered Jun 19 '15 at 00:06

Use the jQuery Cookie Plugin.

You'll then want to set an expires cookie with

$.cookie('name', 'value', { expires: 7 });

Which set's a cookie for your name (change for your app) and expires in 7 days (set this how you like). Then just use the following to check if the cookie exists. If it does then skip the popup code else do the pop-up.

if(!$.cookie('name')) {
  // Do your popup jQuery code.
}

Prevent a triggering action using a cookie with JavaScript

2 Answers2