js实现弹窗24小时只弹出一次jQuery插件

网站上弹窗提醒想24小时只弹出1次怎么办？今天就来说说，怎样通过cookie记录才实现弹窗点击后24小时内不重复出现的实现方法。

首先引入jQuery插件，插件代码如下；

/*jquery.cookie start*/
jQuery.cookie = function(name, value, options) { 
   if (typeof value != 'undefined') { 
    options = options || {}; 
    if (value === null) { 
        value = ''; 
        options = $.extend({}, options); 
        options.expires = -1; 
    } 
    var expires = ''; 
    if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { 
        var date; 
        if (typeof options.expires == 'number') { 
         date = new Date(); 
         date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));  //这里改时间，单位毫秒，默认为1天。
        } else { 
         date = options.expires; 
        } 
        expires = '; expires=' + date.toUTCString(); 
    } 
    var path = options.path ? '; path=' + (options.path) : ''; 
    var domain = options.domain ? '; domain=' + (options.domain) : ''; 
    var secure = options.secure ? '; secure' : ''; 
    [xss_clean] = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
   } else { 
    var cookieValue = null; 
    if ([xss_clean] && [xss_clean] != '') { 
        var cookies = [xss_clean].split(';'); 
        for (var i = 0; i < cookies.length; i++) { 
         var cookie = jQuery.trim(cookies[i]); 
         if (cookie.substring(0, name.length + 1) == (name + '=')) { 
             cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
             break; 
         } 
        } 
    } 
    return cookieValue; 
   } 
}; 
/* jquery.cookie end */

将上面的代码存储为js文件，比如我这里存储为 jquery.cookie.js ，然后在html页面中引入。完整的html和js代码如下；

<script type="text/javascript" src="static/js/jquery.cookie.js"></script> //引入jquery插件

<!--弹窗时间和样式js代码-->
<script type="text/javascript">    
$(function(){    
if($.cookie("isClose") != 'yes'){    
var winWid = $(window).width()/2 - $('.alert_windows').width()/2;    
var winHig = $(window).height()/2 - $('.alert_windows').height()/2;    
$(".alert_windows").css({"left":winWid,"top":-winHig*2}); //自上而下    
$(".alert_windows").show();    
$(".alert_windows").animate({"left":winWid,"top":winHig},1000);    
$(".alert_windows span").click(function(){    
$(this).parent().fadeOut(500);    
//$.cookie("isClose",'yes',{ expires:1/8640}); //测试十秒    
$.cookie("isClose",'yes',{ expires:1}); //一天    
});    
}    
});    
</script>    

<!--弹窗代码部分-->
<div class="alert_windows">    
<div class="alertHead">温馨提示</div>    
<div class="alertMes">这里是弹窗内容，点击确认后，24小时内不再重复显示</div>    
<span>确定</span>    
</div> 

<!--这里弹窗的CSS样式需要自己修改下-->

使用上面的代码就可以实现弹窗24小时只显示一次了，弹窗的css样式记得自己根据需要修改下，如下图效果。

但是有一点需要注意，这里是通过cookie来记录弹窗是否出现过的状态，如果浏览器清除了cookie的话，还是会重复出现的。