michaelwilhelmsen
6/29/2017 - 12:15 PM

Lity Popup Age Check with cookie functionality. Deny access to site if user is not over the age of 18. Dependencies: - lity.js - js-cookie.

Lity Popup Age Check with cookie functionality. Deny access to site if user is not over the age of 18.

Dependencies:

  • lity.js
  • js-cookie.js
  • jquery
<div id="agecheck" class="lity-hide">
  <h3>You need to be over the age of 18 to view the content of this site.</h3>
  <a id="overeighteen" href="#" class="btn btn-green">Yes, I'm 18 years or older</a>
  <a id="undereighteen" href="#" class="btn btn-red">No, I'm under the age of 18</a>
</div>
jQuery(document).ready(function($) {
  // If #agecheck exists
  if ($('#agecheck').length) {
    function isOverEighteen() {
      // Define cookie
      Cookies.set('over-eighteen');

      // Open popup if cookie value is set to "no" or if cookie is undefined
      if (Cookies.get('over-eighteen') == 'no' || Cookies.get('over-eighteen') == undefined) {
        var ageCheckLity = lity($('#agecheck'), {
          'esc': false,
          'template': '<div class="lity" tabindex="-1"><div class="lity-wrap"><div class="lity-loader">Loading...</div><div class="lity-container"><div class="lity-content"></div></div></div></div>' // removed the close button in lity
        });
      }
      
      // If over 18
      $('#overeighteen').on( "click", function(e) {
        Cookies.set('over-eighteen', 'yes');
        ageCheckLity.close();
        e.preventDefault();
      });
      
      // If under 18
      $('#undereighteen').on( "click", function(e) {
        Cookies.set('over-eighteen', 'no');
        window.location.href='http://i.imgur.com/fVDH5bN.gif';
        e.preventDefault();
      });
    }
    
    // Run function
    isOverEighteen();
  }
}); /* end of as page load scripts */