每天响应一次弹出式窗口

Question

该代码每天显示一次弹出窗口。 但是我很难使其具有响应性，而且似乎一生一次……

我将其放在3个不同的页面中，如果在其中一个页面上显示，则不会在其他页面上显示。

 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> 

编辑：我试图用这个替换我的JS，但是还是没用：

$(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

一种解决方案是设置浏览器cookie 。

在执行弹出窗口的某个位置，您创建的cookie的有效期为设置后的24小时。

设置Cookie的有效期限：

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

在显示弹出窗口之前，您将需要在检查Cookie状态周围添加一些逻辑。

至于响应能力，您可能希望将固定宽度换为百分比，或者至少将响应断点与媒体查询一起使用。