每天響應一次彈出式窗口

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狀態周圍添加一些邏輯。

至於響應能力，您可能希望將固定寬度換為百分比，或者至少將響應斷點與媒體查詢一起使用。