Responsive popup once per day

Question

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

I put it in 3 different pages, and if it displays on one of them, it doesn't display in the other pages.

 let localStorage = {}; 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(); }); }); } 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="boxes"> <div style="top: 50%; left: 50%; display: none;" id="dialog" class="window"> <div id="san"> <a href="#" class="close agree"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png" width="25" style="float:right; margin-right: -10px; margin-top: -10px;" alt="" /> </a> <br><br> Visit our new website: <a style="color:blue" target="_blank" href="www.example.come">Example.com</a>. <br><br><br>&#160; </div> </div> <div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask">&#160;</div> </div> 

EDIT: I tried replacing my JS by this one, but still didn't work:

$(document).ready(function() {
            if( $.cookie('showOnlyOne') ){
             console.log("do nothing");
            } else {

                $.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });

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

Answer 1

One solution would be to set a browser cookie .

Somewhere in the execution of your popup, you create the cookie with an expiry date of 24 hours from when it has been set.

Setting the cookie with expiry:

const tomorrow = new Date();
tomorrow.setDate( tomorrow.getDate() + 1 )
document.cookie = `popupShown=true; expires=${ tomorrow }`;

You will need to add some logic around checking the cookie status before displaying the popup.

As for being responsive you may want to swap out fixed-widths for percentages, or at least use responsive breakpoints with media queries.