Display A Popup Only Once Per User

Question

There have already been answers to this question but I am still unsure exactly how it works.

I am using the following HTML in my footer.php:

<div id="popup">
    <div>
        <div id="popup-close">X</div>
            <h2>Content Goes Here</h2>
    </div>
</div>

and the following Javascript:

$j(document).ready(function() {
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
    {
    $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e) 
    {
    $j('#popup').fadeOut(); 
    });
});

Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.

I know that I will have to load the cookie JS in my footer with this:

<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script> 

But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?

Thanks

James

Answer 1

*Note : This will show popup once per browser as the data is stored in browser memory.

Try HTML localStorage .

Methods :

• localStorage.getItem('key');
• localStorage.setItem('key','value');

---

$j(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $j('#popup').delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $j('#popup-close, #popup').click(function() // You are clicking the close button
    {
        $j('#popup').fadeOut(); // Now the pop up is hidden.
    });
});

Working Demo

Answer 2

This example uses jquery-cookie

Check if the cookie exists and has not expired - if either of those fails, then show the popup and set the cookie (Semi pseudo code):

if($.cookie('popup') != 'seen'){
    $.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
        {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e) 
        {
        $j('#popup').fadeOut(); 
    });
};

Answer 3

You could get around this issue using php. You only echo out the code for the popup on first page load.

The other way... Is to set a cookie which is basically a file that sits in your browser and contains some kind of data. On the first page load you would create a cookie. Then every page after that you check if your cookie is set. If it is set do not display the pop up. However if its not set set the cookie and display the popup.

Pseudo code:

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}

Answer 4

Offering a quick answer for people using Ionic. I need to show a tooltip only once so I used the $localStorage to achieve this. This is for playing a track, so when they push play, it shows the tooltip once.

$scope.storage = $localStorage; //connects an object to $localstorage

$scope.storage.hasSeenPopup = "false";  // they haven't seen it


$scope.showPopup = function() {  // popup to tell people to turn sound on

    $scope.data = {}
    // An elaborate, custom popup
    var myPopup = $ionicPopup.show({
        template: '<p class="popuptext">Turn Sound On!</p>',
        cssClass: 'popup'

    });        
    $timeout(function() {
        myPopup.close(); //close the popup after 3 seconds for some reason
    }, 2000);
    $scope.storage.hasSeenPopup = "true"; // they've now seen it

};

$scope.playStream = function(show) {
    PlayerService.play(show);

    $scope.audioObject = audioObject; // this allow for styling the play/pause icons

    if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
        $scope.showPopup();
    }
}

Answer 5

You can use removeItem() class of localStorage to destroy that key on browser close with:

window.onbeforeunload = function{
    localStorage.removeItem('your key');
};

Answer 6

The code to show only one time the popup (Bootstrap Modal in the case) :

modal.js

 $(document).ready(function() {
     if (Cookies('pop') == null) {
         $('#ModalIdName').modal('show');
         Cookies('pop', '365');
     }
 });

Here is the full code snipet for Rails :

Add the script above to your js repo (in Rails : app/javascript/packs)

In Rails we have a specific packing way for script, so :

1. Download the js-cookie plugin (needed to work with Javascript Cokkies) https://github.com/js-cookie/js-cookie (the name should be : 'js.cookie.js')

    /*! * JavaScript Cookie v2.2.0 * https://github.com/js-cookie/js-cookie * * Copyright 2006, 2015 Klaus Hartl & Fagner Brack * Released under the MIT license */ ;(function (factory) { var registeredInModuleLoader = false; if (typeof define === 'function' && define.amd) { define(factory); registeredInModul ...

2. Add //= require js.cookie to application.js

It will works perfectly for 365 days!

Answer 7

You might be using an API for fetching user from database, so use any unique data like id or email or name to identify user then use localstorage method suggested by @Shaunak D. Just replace key with user's unique field and value with popup state.

Like: ID : popup_state

Sorry for the mistakes in the reply. I am not on my pc today 😅😛

Answer 8

There have already been answers to this question but I am still unsure exactly how it works.

I am using the following HTML in my footer.php:

<div id="popup">
    <div>
        <div id="popup-close">X</div>
            <h2>Content Goes Here</h2>
    </div>
</div>

and the following Javascript:

$j(document).ready(function() {
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
    {
    $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e) 
    {
    $j('#popup').fadeOut(); 
    });
});

Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.

I know that I will have to load the cookie JS in my footer with this:

<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script> 

But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?

Thanks

James