How to Add Warning

[xvids]

Hello,

 

When first time someone browse KVS based site.

 

I wanna to show him a Warning alert +18 [h=2]You must verify that you are 18 years of age or older to enter this site.[/h]

 

Thanks....

[Tech Support]

There should be plenty of ready-made solutions which you can find in google, for example this one:

https://ageverify.co

[xvids]

Hi,

 

I found this, and I have added it to website.

But one issue of cookie

Which cookie use KVS,

Please can you edit it according to KVS cookie

Sorry I'm newbie

 

var modal_content,
modal_screen;

// Start Working ASAP.
$(document).ready(function() {
   av_legality_check();
});


av_legality_check = function() {
   if ($.cookie('is_legal') == "yes") {
       // legal!
       // Do nothing?
   } else {
       av_showmodal();

       // Make sure the prompt stays in the middle.
       $(window).on('resize', av_positionPrompt);
   }
};

av_showmodal = function() {
   modal_screen = $('<div id="modal_screen"></div>');
   modal_content = $('<div id="modal_content" style="display:none"></div>');
   var modal_content_wrapper = $('<div id="modal_content_wrapper" class="content_wrapper"></div>');
   var modal_regret_wrapper = $('<div id="modal_regret_wrapper" class="content_wrapper" style="display:none;"></div>');

   // Question Content
   var content_heading = $('<h2>Are you 21 or older?</h2>');
   var content_buttons = $('<nav><ul><li><a href="#nothing" class="av_btn av_go" rel="yes">Yes</a></li><li><a href="#nothing" class="av_btn av_no" rel="no">No</a></li></nav');
   var content_text = $('<p>You must verify that you are 21 years of age or older to enter this site.</p>');

   // Regret Content
   var regret_heading = $('<h2>We\'re Sorry!</h2>');
   var regret_buttons = $('<nav><small>I hit the wrong button!</small> <ul><li><a href="#nothing" class="av_btn av_go" rel="yes">I\'m old enough!</a></li></ul></nav');
   var regret_text = $('<p>You must be 21 years of age or older to enter this site.</p>');

   modal_content_wrapper.append(content_heading, content_buttons, content_text);
   modal_regret_wrapper.append(regret_heading, regret_buttons, regret_text);
   modal_content.append(modal_content_wrapper, modal_regret_wrapper);

   // Append the prompt to the end of the document
   $('body').append(modal_screen, modal_content);

   // Center the box
   av_positionPrompt();

   modal_content.find('a.av_btn').on('click', av_setCookie);
};

av_setCookie = function(e) {
   e.preventDefault();

   var is_legal = $(e.currentTarget).attr('rel');

   $.cookie('is_legal', is_legal, {
       expires: 30,
       path: '/'
   });

   if (is_legal == "yes") {
       av_closeModal();
       $(window).off('resize');
   } else {
       av_showRegret();
   }
};

av_closeModal = function() {
   modal_content.fadeOut();
   modal_screen.fadeOut();
};

av_showRegret = function() {
   modal_screen.addClass('nope');
   modal_content.find('#modal_content_wrapper').hide();
   modal_content.find('#modal_regret_wrapper').show();
};

av_positionPrompt = function() {
   var top = ($(window).outerHeight() - $('#modal_content').outerHeight()) / 2;
   var left = ($(window).outerWidth() - $('#modal_content').outerWidth()) / 2;
   modal_content.css({
       'top': top,
       'left': left
   });

   if (modal_content.is(':hidden') && ($.cookie('is_legal') != "yes")) {
       modal_content.fadeIn('slow')
   }
};

[Tech Support]

This script works for me, but it misses some CSS styling, because the dialog is created under the footer without any visual styling. When I press yes button it creates a cookie and is not displayed next time.

You don't need to modify anything related to cookie, it uses its own cookie, which works just fine.

 

Thanks for sharing it, it will be great if you can put link to its website, so that other users can also download if needed.

[xvids]

Hello, Thanks for help! but I'm waiting for More clearly Installation info.

 

URL: https://github.com/4Xvids/age-verify

 

I had install it.

 

Add the .js in /%root%/js/main.min.js

 

and Add the .css code to the main css file

 

and in footer

 

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

 

<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

 

as i see at /js/main.min.js - there is have

 
jQuery Cookie Plugin v1.3.1    
jQuery BlockUI; v20141123

Should I use that in Footer or not:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>   

 

 

 

Thanks

[Tech Support]

You don't need to include any dependent libraries, as these libraries already included into the theme JS file.

 

The code you posted at the very beginning is working if simply copy it to footer, the only thing you need is to add CSS styles to make it be displayed correctly.

[Tech Support]

Theme customization: easy way to display age verification popup