jQuery+cookie仿苏宁每天首页出现广告弹出层

在项目中经常遇到首页每天出现弹出层广告，一般我们用PHP或cookie插件http://www.sucaihuo.com/js/89.html来设置时间。今天站长用简单的cookie函数来做一个这样的基于jQuery的广告DEMO。

素材火QQ群：173359504，在线充值，或联系QQ416148489直接充值

分类：悬浮层/弹出层 > 弹窗 难易：中级

查看演示下载资源： 11 次 下载资源下载积分： 1 分

弹出层图片、关闭按钮.new_close以及苏宁网页ifrmae

<div class="new_user"  id="new_user">      <div class="new_pic">          <a target="_blank" href="http://sucaihuo.com">              <img alt="素材火大背景图片" src="images/pic.png">          </a>      </div>      <span class="new_close" onclick="hideNewUser()"></span>  </div>  <div class="overlay" id="overlay"></div>  <iframe src="http://www.sucaihuo.com/modals/4/444/demo/" width="100%" height="100%" scrolling="yes"/>

jQuery+cookie设置每天弹出一次广告，关闭后不再显示

var is_first = getCookie("is_first");  if (is_first != 1) {      showNewUser();      var time = getTodayOtherTime(); //每天一次      setCookie("is_first", 1, time);//3600 * 24 有效期一天  } else {      hideNewUser();  }

//设置cookies函数

function setCookie(name, value, time) { //name:cookie键名，value:cookie键值,和时间S      var exp = new Date();      exp.setTime(exp.getTime() + time * 1000);//有效期1小时       document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();  }

//从当前时间到明日0点的时间戳

function getTodayOtherTime() {      var today = new Date();      today.setHours(0);      today.setMinutes(0);      today.setSeconds(0);      today.setMilliseconds(0);      //明日0点时间戳      var tomorrow_0 = today.getTime() / 1000 + (24 * 3600);      var current_time = Math.round(new Date().getTime() / 1000);      var expire = tomorrow_0 - current_time;      return expire;  }

显示广告

function showNewUser() {      var document_height = $(document).height();      var window_height = $(window).height();      var height = document_height > window_height ? document_height : window_height;      $("#overlay").css({"height": height, "display": "block"})      $("#new_user").show();  }

隐藏广告并关闭背景遮罩层

function hideNewUser() {      $("#new_user").hide();      $("#overlay").css({"display": "none"})  }




文档说明：要在php环境中运行才能对cookie函数进行读取，才能正确的显示

源码：http://pan.baidu.com/s/1mhC63fq