Show Jquery Popup Only Once

问题

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

回答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.

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

回答3:

You can use this for one time popup.

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

来源：https://stackoverflow.com/questions/21991856/show-jquery-popup-only-once

标签

jquery

popup