每天一次响应弹出窗口

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 状态的逻辑。

至于响应式，您可能希望将固定宽度换成百分比，或者至少在媒体查询中使用响应式断点。