how to stop pop up to appear when the page loads for the second time?

StackOverflow https://stackoverflow.com/questions/23270017

Question

html page:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Modal Window from Queness</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {  

        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000);     

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     

});

</script>

<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}
</style>
</head><body>
<div style="font-size: 10px; color: #000;">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
<a href="#" class="close">Close it</a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>

</html>

hi above is my code in which a pop up appears whenever a page loads.but what i want is the pop up must appear only for the first time for one user when he does a refresh or loads a page.is it possible??

Was it helpful?

Solution

You should use a cookie or local storage because the lifetime of your javascript ends when you refresh the page.

$(document).ready(function() {  

    var firstTime = localStorage.getItem("firstTime");

    if(! firstTime){
       // all your current code
       localStorage.setItem("firstTime", true);
    }

});

OTHER TIPS

You should use a cookie or local storage.

Following a logical thinking: the first time your client access your application, create a cookie called first_time with its value as false. Then, you have to make your JavaScript check if the cookie first_time has true as value and if so, then show up your popup or else, do nothing.

Attention!

Local Storage - if you want to use it - is a HTML5's feature and you need to use polyfill to work with it on older browsers seamlessly.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top