CODEWITHSUNDEEP
javascriptjquerycookiesmodal-dialogjquery-cookie
JStormThaKid
JStormThaKid

Reputation: 1806

Display Modal Window once every 3 days with cookie

I am trying to add carhartl's jquery.cookie.js script to my modal script so that I can have the modal show only if a user has not been there/seen the modal for 3 days or if the user has recently cleared there cache.

Here's what I have so far...

This code currently launches my modal by auto clicking the button to launch the modal window and works perfectly. (I know there might be a way to re-work this so that it just auto-loads the modal without need for a button, so if you can help me re-work that part I would appreciate it, also.)

<div style="visibility:hidden;">
   <button class="md-trigger" id="modal11" data-modal="modal-11"></button>
</div>

<script>
jQuery(function(){
   jQuery('#modal11').click();
});
</script>

But when adding the script the add a cookie to my modal, i seem to run into an issue, please view the code below and see where I am going wrong...

<div style="visibility:hidden;">
   <button class="md-trigger" id="modal11" data-modal="modal-11"></button>
</div>

<script>
   $(document).ready(function() {
      if ($.cookie('modal_shown') == null) {
         $.cookie('modal_shown', 'yes', { expires: 3, path: '/' });
         $('#modal11').click();
      }
   });
</script>

Thanks in advance for any assistance you can provide on this, I really appreciate your help! ;-)

here are my updates, based on @zigdawgydawg's help... but it's still not functioning for me...

<script>
$(document).ready(function() {
   $('#modal11').click(function();
});

console.log($.cookie('modal_shown'));
   if ($.cookie('modal_shown') == null) {
      console.log('creating cookie');
   $.cookie('modal_shown', 'yes', { expires: 365, path: '/' });
   $('#modal11').click();

}
console.log($.cookie('modal_shown'));
});
</script>

Upvotes: 0

Views: 4451

Answers (1)

zigdawgydawg
zigdawgydawg

Reputation: 2046

Here is working example that shows a dialog if the "modal_shown" cookie is not present. Once the modal is shown, the cookie is added so that it won't show up again for 3 days.

Demo: http://jsfiddle.net/3M9Wq/

You'll need to include these libraries/stylesheets: jQuery, jQuery UI, jQuery Cookie plugin, a jQuery UI theme CSS.

HTML:

<div id="dialog">The dialog</div>

jQuery:

$(document).ready(function() {

    // Initialize the dialog (initially hidden)
    $('#dialog').dialog({autoOpen: false});

    // Check for the "modal_shown" cookie.  If not found, show the dialog and add the cookie
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 3, path: '/' });
        $('#dialog').dialog("open");        
    }
});

Alternate jQuery that clicks a button instead of directly opening the dialog:

$(document).ready(function() {

    // Check for the "modal_shown" cookie.  If not found, click the button and add the cookie
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 3, path: '/' });
        $('#modal11').click();     
    }
});

Upvotes: 1

Related Questions