Popup WordPress warning for 18+

Started by lizatailor23, Jul 30, 2022, 12:53 AM

Previous topic - Next topic

lizatailor23Topic starter

Faced with such a piece of work that it is necessary when entering the website (at the first time) that messages would appear with a warning about Š°dult content and that you are 18+ or not, of course, with the "yes" and "no" buttons.

How to organize it rightly? With a plugin, what? Add to template code? Or is it already in the WP settings?

And how will SEs react to this case?

Thanks in advance.


I think, something from the past ..
Extra rejections, because a user can miss or just accidentally press no.

Those who are looking for 18+, they are definitely 18 or they don't care that they are not 18 and they want to enter the website by successfully clicking the Yes button.
You do not plan to tie authorization through FB, for example?


Is it possible to implement this solution on bare JavaScript+HTML?

Of course it is possible!
That's exactly what we did when we received an order to develop such a plugin for an online store on Webasyst.
The fact is that Webasyst is now a cloud platform that seems to be user-friendly, but does not allow you to use all the advantages of PHP.
Therefore, we used only jQuery and its plugins, as well as bootstrap 3 for the appearance of the warning pop-up window.
Moreover, bootstrap is loaded dynamically using JavaScript, depending on the user's actions.
At the user's first visit, he is shown a pop-up window with a question about the age of majority, which closes all content.
If the user answers yes to the age question, then a cookie is set for him and the window is hidden.
The next time you visit website, the presence of cookies is checked and, if everything is in order, the window is not shown.
If the user refused, then he is redirected from the site to a third-party resource.

But the implementation of its work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.8/jquery.min.js"></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
 }(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' : ''
 // 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);
 // 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
 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 >');
 $.cookie('warning_dialog_cookie', 'yes', { expires: 1 });
 document.location.href = 'https://empty.pro'; //here is the address where to redirect in case of failure
<pre><!-- You can style the modal window here -->
 .modal-backdrop.in {
 opacity: 1
 background: #965623;
<!-- 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 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 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 class="col-xs-6 text-center">
 <button type="button" class="btn btn-block btn-danger" id="warning_button_no">No</button>