Jake Jake - 6 months ago 47
Javascript Question

Have a bootstrap ad modal appear on page load every six hours

Here's the site I'm working on (it's all a bit sloppy right now, so my apologies):
http://spectrumdesigns.co/Basketball/

Essentially I have a modal called "ad-modal" that I want to pop up on page load for the user, but then not pop up again until 6+ hours later.

I used the following code to attempt to do this (from looking at other sources) alongside the jquery.cookie.js script. Can anyone identify what I'm doing wrong?

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


and here's the html of #ad-modal

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

Answer

Use this one. Tested and it work.

$(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();
  }

});

and change ur jquery cookie.js from https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js.

I found that ur jquery.cookie.js has problem.