每六个小时在页面加载时出现一个引导广告模式

时间:2015-11-04 02:37:07

标签: javascript jquery twitter-bootstrap cookies

这是我正在处理的网站(现在它有点草率,所以我很抱歉): http://spectrumdesigns.co/Basketball/

基本上我有一个名为" ad-modal"我希望在用户的页面加载时弹出,但直到6个多小时后才会再次弹出。

我使用以下代码尝试执行此操作(从查看其他来源)以及jquery.cookie.js脚本。谁能确定我做错了什么?

<script type="text/javascript">
 $(document).ready(function() {
     if ($.cookie('modal_shown') == null) {
             $.cookie('modal_shown', 'yes', { expires: 1, path: '/' });
         $('#ad-modal').reveal();
     }
 });
</script>

这里是#ad-modal

的html
<div class="modal modal-fullscreen ad fade" id="ad-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <a class="close" href="#" data-dismiss="modal" style="color: #ffffff;z-index: 99;">X</a>
    <img src="images/550ad.jpg" class="center hidden-xs"  width="100%" height="auto" style="max-width: 550px">
    <img src="images/300by450ad.jpg" class="center visible-xs"  width="100%" height="auto" style="max-width: 300px"><br />
    <p><button type="button" class="btn btn-danger hidden-md hidden-lg" data-dismiss="modal" href="#" style="position: absolute;right: 10px;bottom:10px;">Close</button></p>


</div>

2 个答案:

答案 0 :(得分:3)

使用这个。经过测试并且有效。

$(document).ready(function() {

  if (!$.cookie("modal_shown")) {
    var expire = new Date(Date.now() + 6 * 60 * 60 * 1000);
    $.cookie('modal_shown', 'yes', {
      expires: expire,
      path: '/'
    });
    $('#ad-modal').modal();
  }

});

并从https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js更改您的jquery cookie.js。

我发现你的jquery.cookie.js有问题。

答案 1 :(得分:1)

假设您正在使用carhartl/jquery-cookie

expires选项接受NumberDate对象。要创建一个将在6小时后过期的Cookie,您只需将new Date(Date.now() + 6 * 60 * 60 * 1000)传递给它。

调用模态的方法也只是modal()而不是reveal()

<script type="text/javascript">
  $(document).ready(function() {
    if (!$.cookie('modal_shown')) {
      $.cookie('modal_shown', 'yes', { expires: new Date(Date.now() + 6 * 60 * 60 * 1000), path: '/' });
      $('#ad-modal').modal();
    }
  });
</script>