CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcookies
Jake
Jake

Reputation: 125

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>

Upvotes: 3

Views: 830

Answers (2)

Bean
Bean

Reputation: 218

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.

Upvotes: 3

Lucius
Lucius

Reputation: 2882

Assuming you're using carhartl/jquery-cookie,

The expires option accepts a Number or Date object. To create a cookie that will expire 6 hours from now, you just pass new Date(Date.now() + 6 * 60 * 60 * 1000) to it.

Also the method to call a modal is just modal() not 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>

Upvotes: 1

Related Questions