Show Jquery Popup Only Once

Question

I have a site where a user must login and once that is done they are directed to a new page and a pop up box appears. I have no problem displaying the popup box however if you refresh the page over and over the popup box appears. I want it to display only once they login and never again after that as long as they never sign out. This means if they re-fresh the page or anything like that the popup will NOT appear again. Is there some sort of plugin or easy code for this (I'm kind of a beginner in Jquery)?

<div id="popup-image-back">
    <div class="popup-textbox">
        <div class="textbox-title">WE’VE HAD A MAKEOVER!</div>
        <div class="textbox-p">With fewer restrictions, more destinations and even better rewards you can start saving more money!</div>
    </div>
    <img class="new-popup-xclose" src="images/close-x-dark.png" />
</div>
<div id="back-wrapper"></div>

JavaScript

$(document).ready(function () {
    $('#back-wrapper').fadeIn(1000, function () {
        $('#popup-image-back').fadeIn(1000);
    });
    $(".new-popup-xclose").click(function () {
        $('#popup-image-back').fadeOut(1000);
        $('#back-wrapper').fadeOut(1000);
    });
});

Answer 1

While this thread may be ancient, I wanted to give an answer that OP could have used. By using cookies, you can set the page to only show once. Since most browsers support cookies, this is more reliable than using the internal storage engine that current browsers possess.

$(document).ready(function(){

    // test for cookie here
    if ($.cookie('test_status') != '1') {
        //show popup here
        window.open('YOUR POPUP URL HERE','windowtest','toolbar=0,status=0,width=500,height=500');

        // set cookie here if not previous set
        var date = new Date();
        var minutes = 30;
        date.setTime(date.getTime() + (minutes * 60 * 1000));
        $.cookie('test_status', '1', {expires: date});
   }

});

To test this, be sure to clear your cookies between every refresh.

Answer 2

you can use localstorage to do that:

if (localStorage.getItem("iswrpdivloaded") === null) {
  $('#back-wrapper').fadeIn(1000,function(){
   $('#popup-image-back').fadeIn(1000);
});
localStorage.setItem('iswrpdivloaded', 1);
}

Answer 3

You can use this for one time popup.

$(window).load(function(){
        $('.popUp').show();
        $('.close').click(function(){
            $('.popUp').slideUp();
        });
        setTimeout('$(".popUp").fadeOut()', 10000);
    });