如何在javascript中仅在2天时弹出一次弹出窗口?

时间:2015-09-16 13:26:33

标签: javascript html cookies popupwindow

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

我对弹出窗口的代码是:

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

提前致谢。

4 个答案:

答案 0 :(得分:1)

我的解决方案使用Cookie。

将其放在页面的<head>中,以确保jQueryjQuery UI(用于显示对话框),并加载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>

如果您有任何问题,请发布您网页的链接或html代码,我们会帮助您插入此代码。我已经对它进行了测试,但它确实有效。

这是代码示例: https://jsfiddle.net/d2s1r0mp/1/

答案 1 :(得分:0)

以下代码在浏览器中打开一个窗口。

window.open("url"); 

就每2天开放一次而言,最好的办法是将其包含在某种cron作业中。不知道为什么你会使用cookie打开一个窗口。

答案 2 :(得分:0)

查看此代码......

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中存储时间来获得近似结果,并根据它显示/隐藏div。

答案 3 :(得分:0)

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

<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帮助我。