1

this code is to display a pop up once per day. But I'm having trouble making it responsive, and it seems that it shows once a lifetime...

Also if I put it in 3 different pages, and it only shows up in one of them...

CSS:

<p><style type="text/css">#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
}
#boxes #dialog {
  width:450px; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
}

.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
 background-color:#D1D1D1;
 color: green;
}
.popupoption2:hover{
 color: red;
}
</style></p>


Visit our new website: Example.com.


   

Javascipt:

if(localStorage.last){
    if( (localStorage.last - Date.now() ) / (1000*60*60*24) >= 1){ //Date.now() is in milliseconds, so convert it all to days, and if it's more than 1 day, show the div


            $(document).ready(function() { 
              var id = '#dialog';
              var maskHeight = $(document).height();
              var maskWidth = $(window).width();
              $('#mask').css({'width':maskWidth,'height':maskHeight}); 
              $('#mask').fadeIn(500); 
              $('#mask').fadeTo("slow",0.9); 
                    var winH = $(window).height();
              var winW = $(window).width();
                    $(id).css('top',  winH/2-$(id).height()/2);
              $(id).css('left', winW/2-$(id).width()/2);
                 $(id).fadeIn(2000);  
                 $('.window .close').click(function (e) {
              e.preventDefault();
              $('#mask').hide();
              $('.window').hide();
                 });  
                 $('#mask').click(function () {
              $(this).hide();
              $('.window').hide();
             });  

            });


        localStorage.last = Date.now(); //Reset your timer
 }
}
else{
localStorage.last = Date.now();
    $(document).ready(function() { 
              var id = '#dialog';
              var maskHeight = $(document).height();
              var maskWidth = $(window).width();
              $('#mask').css({'width':maskWidth,'height':maskHeight}); 
              $('#mask').fadeIn(500); 
              $('#mask').fadeTo("slow",0.9); 
                    var winH = $(window).height();
              var winW = $(window).width();
                    $(id).css('top',  winH/2-$(id).height()/2);
              $(id).css('left', winW/2-$(id).width()/2);
                 $(id).fadeIn(2000);  
                 $('.window .close').click(function (e) {
              e.preventDefault();
              $('#mask').hide();
              $('.window').hide();
                 });  
                 $('#mask').click(function () {
              $(this).hide();
              $('.window').hide();
             });  

            });

}
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.