如何在 javascript 的 2 天内只显示一次弹出窗口？

Question

我需要一个简单的代码来使用 cookie 在每个用户 2 天内显示一次弹出窗口 window。如果有人可以帮助我，我不知道如何在 javascript 中编码。

我的弹出窗口代码 window 是：

<script type="text/javascript"> 
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}

$(document).ready(function () {
    setTimeout(function(){
        $('#bsadsheadline').fadeIn(500);
    }, 30000);
});
</script>
<div id="bsadsheadline">
<div id="bloggerspicesflotads">
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em"></span>
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em;float:right;padding-top:2px;padding-right:115px"><a href="javascript:void(0);" onclick="getValue();">inchide(x)</a></span>
</div>
<div id="bsadsbase">
my code
</div></div>

提前致谢。

Answer 1

下面的代码会在您的浏览器中打开 window。

window.open("url");

就每 2 天打开一次而言，最好的办法是将其包装在某种 cron 作业中。不知道为什么要使用 cookie 打开 window.

Answer 2

检查此代码...

if(localStorage.last){
    if( (localStorage.last - Date.now() ) / (1000*60*60*24*2) >= 1){ //Date.now() is in milliseconds, so convert it all to days, and if it's more than 1 day, show the div
        document.getElementById('div#popup').style.display = 'block'; //Show the div
        localStorage.last = Date.now(); //Reset your timer
    }
}
else {
    localStorage.last = Date.now();
    document.getElementById('div#popup').style.display = 'block'; //Show the div because you haven't ever shown it before.
}

为了完全准确，您必须使用数据库来维护向用户显示的用户 ID 和阻止时间。但是，如果这不是一个非常严格的规则，您可以通过将时间存储在浏览器 cookie 中来获得近似结果，并且 show/hide div 以此为基础。

Answer 3

我的解决方案使用 cookie。

将其放在页面的 <head> 中，以确保 jQuery, jQuery UI (used for displaying the dialogue), and jQuery Cookie Plugin 库已加载：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

将其放在页面底部 </body> 标记之前

$(document).ready(function() {

   // Make sure dialog is initially hidden:
   $('#dialog').dialog({autoOpen: false});

    // Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie.
    // The cookie will expire and every 2 days and the dialog will show again.

    if ($.cookie('whenToShowDialog') == null) {

        // Create expiring cookie, 2 days from now:
        $.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });

        // Show dialog
        $('#dialog').dialog("open");        
    }

});
</script>

将它放在页面的 <body> 部分，然后放置任何你想要的而不是 <p> 的东西。

<div id="dialog" title="Test dialog">
  <p>This dialog will only show every 2 days.</p>
</div>

如果您有任何问题，post 页面的 link 或 html 代码，我会帮助您插入此代码。我已经测试过了，它有效。

下面是实际的代码示例： https://jsfiddle.net/d2s1r0mp/1/

Answer 4

将此代码添加到页面的头部即可完成工作：

<script>
$(document).ready(function() {

    // Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie.
    // The cookie will expire and every 2 days and the dialog will show again.
    if (jQuery.cookie('whenToShowDialog') == null) {

        // Create expiring cookie, 2 days from now:
        jQuery.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });

        // Show dialog
        setTimeout(function(){
        $('#bsadsheadline').fadeIn(500);
    }, 30000);       
    }

});
</script>

感谢@John Valai 对我的帮助。

如何在 javascript 的 2 天内只显示一次弹出窗口？

How to show popup only once at 2 days in javascript?

html

javascript

cookies

popupwindow