How can we properly implement a warning message for аdult content on our website? The message should appear upon entering the site for the first time and prompt the user to confirm if they are 18+ or not with yes and no buttons.

What is the recommended method for implementing this, such as using a plugin or adding to template code? Additionally, how will search engines respond to this implementation? Thank you in advance.

I believe that implementing an extra rejection step for users to confirm their age may not be effective, as some users may accidentally or intentionally select "no".

Those who are truly seeking аdult content will likely click "yes" regardless of their actual age. Have you considered implementing authorization through a platform such as Facebook instead?

Can we develop a solution using only JavaScript and HTML?

Yes, it is definitely possible! We have previously developed a plugin for an online store on Webasyst using only jQuery and its plugins, as well as Bootstrap 3 for the appearance of the warning pop-up window. Since Webasyst is a cloud platform that does not allow you to use all the advantages of PHP, we avoided using it altogether.

 Additionally, we dynamically loaded Bootstrap using JavaScript based on the user's actions. Upon the user's first visit, they are presented with a pop-up window asking about their age, which closes all content until an answer is given. If the user confirms they are of legal age, a cookie is set and the window is hidden. On future visits, the presence of cookies is checked and, if everything is in order, the window is not shown. If the user refuses to confirm their age, they are redirected from the site to a third-party resource.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.8/jquery.min.js"></script>
<script>
 (function (factory) {
 if (typeof define === 'function' && define.amd) {
 // AMD (Register as an anonymous module)
 define(['jquery'], factory);
 } else if (typeof exports === 'object') {
 // Node/CommonJS
 module.exports = factory(require('jquery'));
 } else {
 // Browser globals
 factory(jQuery);
 }
 }(function ($) {
 
 var pluses = /+/g;
 
 encode(s) {
 return config.raw ? s : encodeURIComponent(s);
 }
 
 function decode(s) {
 return config.raw ? s : decodeURIComponent(s);
 }
 
 function stringifyCookieValue(value) {
 return encode(config.json ? JSON.stringify(value) : String(value));
 }
 
 function parseCookieValue(s) {
 if (s.indexOf('"') === 0) {
 // This is a quoted cookie as according to RFC2068, unescape...
 s = s.slice(1, -1).replace(/"/g, '"').replace(//g, '');
 }
 
 try {
 // Replace server-side written pluses with spaces.
 // If we can't decode the cookie, ignore it, it's unusable.
 // If we can't parse the cookie, ignore it, it's unusable.
 s = decodeURIComponent(s.replace(pluses, ' '));
 return config.json ? JSON parse(s) : s;
 } catch(e) {}
 }
 
 function read(s, converter) {
 var value = config.raw ? s : parseCookieValue(s);
 return $.isFunction(converter) ? converter(value) : value;
 }
 
 var config = $.cookie = function (key, value, options) {
 
 // Write
 
 if (arguments.length > 1 && !$.isFunction(value)) {
 options = $.extend({}, config.defaults, options);
 
 if (typeof options.expires === 'number') {
 var days = options.expires, t = options.expires = new Date();
 t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
 }
 
 return (document.cookie = [
 encode(key), '=', stringifyCookieValue(value),
 options.expires? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
 options.path ? '; path=' + options.path : '',
 options.domain ? '; domain=' + options.domain : '',
 options.secure ? '; secure' : ''
 ].join(''));
 }
 
 // read
 
 varresult = key ? undefined : {},
 // To prevent the for loop in the first place assign an empty array
 // in case there are no cookies at all. Also prevents odd result when
 // calling $.cookie().
 cookies = document.cookie ? document.cookie.split('; ') : [],
 i = 0,
 l = cookies.length;
 
 for (; i < l; i++) {
 varparts = cookies[i].split('='),
 name = decode(parts.shift()),
 cookie = parts.join('=');
 
 if (key === name) {
 // If second argument (value) is a function it's a converter...
 result = read(cookie, value);
 break;
 }
 
 // Prevent storing a cookie that we couldn't decode.
 if (!key && (cookie = read(cookie)) !== undefined) {
 result[name] = cookie;
 }
 }
 
 return result;
 };
 
 config.defaults = {};
 
 $.removeCookie = function (key, options) {
 // Must not alter options, thus extending a fresh object...
 $.cookie(key, '', $.extend({}, options, { expires: -1 }));
 return !$.cookie(key);
 };
 
 }));
//Load bootstrap 3 if there is no cookie
 if(!$.cookie('warning_dialog_cookie')){
 document.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">');
 document.write('<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script >');
 }
 
 $(document).ready(function(){
 if(!$.cookie('warning_dialog_cookie')){
 $('#myModal').modal('show');
 }
 $('#warning_button_yes').click(function(){
 $.cookie('warning_dialog_cookie', 'yes', { expires: 1 });
 $('#myModal').modal('hide');
 });
 $('#warning_button_no').click(function(){
 $.removeCookie('warning_dialog_cookie');
 document.location.href = 'https://empty.pro'; //here is the address where to redirect in case of failure
 });
 });
</script>
 
</pre>
<pre><!-- You can style the modal window here -->
<style>
 .modal-backdrop.in {
 opacity: 1
 background: #965623;
 }
</style>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header text-center">
 <h4 class="modal-title" id="myModalLabel">Are you over 18?</h4>
 </div>
 <div class="modal-body text-center">
 The content of the site is intended for viewing only by persons who have reached the age of majority!
 </div>
 <div class="modal-footer">
 <div class="row">
 <div class="col-xs-6 text-center">
 <button type="button" class="btn btn-block btn-success" id="warning_button_yes">Yes</button>
 </div>
 <div class="col-xs-6 text-center">
 <button type="button" class="btn btn-block btn-danger" id="warning_button_no">No</button>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>