WordPress - custom 18+ pop-up alert doesn't work properly

Question

I trying to make custom 18+ alert (only on first visit), but it doesn't works.. Basicly in custom html template it worked, but on WordPress doesn't The view on the website And here , how it should looks, but the MUST HAVE thing is that visitor of website must see the website, this is just something like modal..

The second MUST HAVE thing is, it should to show only on first visit, and after I click on "POKRAČOVAT" button, this alert should disappear and doesn't show anywhere on the website. I already tried an cookie way, via. Make a splash screen appear only on first visit in Wordpress (the accepted answer)

And I tried too this way: Display A Popup Only Once Per User (the accepted answer too) but it doesn't works for me.. Let me to show you code below (the second option), in header.php :

<script type="text/javascript"> 
        $(document).ready(function() {
            if(localStorage.getItem('age-test') != 'shown'){
                $("#snippet-ageTest-alertbox").delay(2000).fadeIn();
                localStorage.setItem('age-test','shown')
            }

            $('#snippet-ageTest-alertbox-close').click(function(e) // You are clicking the close button
            {
                $('#snippet-ageTest-alertbox').fadeOut(); // Now the pop up is hiden.
            });
            $('#snippet-ageTest-alertbox').click(function(e) 
            {
                $('#snippet-ageTest-alertbox').fadeOut(); 
            });
        }); 
</script>


<div id="snippet-ageTest-alertbox">        
            <div id="age-test" class="main_background" style="display: block;">
                <div class="age-test-square main_background clearfix">
                    <div class="title">
                        <span>    
                            Pokračovaním potvrzuji, že
                            jsem starší 18 let
                        </span>
                    </div>
                    <div>
                        <a class="agree button-conversion" href="#">
                            Pokračovat
                        </a>
                    </div>
                </div>
            </div>

</div>

Answer 1

You need to both set and then check a cookie. Since this isn't native to jQuery, you need a function for that. Then like you were trying, you want to check that the cookie is set before you show the popup.

An example of javascript cookies can be found here https://www.w3schools.com/js/js_cookies.asp

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

jQuery(function($){
    // define your cookie's name.
    let c = getCookie('age-test');
    // check if the cookie is set and if not show modal.
    if (c !== 'shown'){
        $("#snippet-ageTest-alertbox").delay(2000).fadeIn();
        setCookie('age-test', 'shown', '99'); // set number of days expired.
    }
});

Answer 2

Rather than adding custom codes in your WordPress web app, WordPress offers a tone of plugins that can do the same thing with high accuracy, so I would advise you to use plugins rather than embedding 3rd party code snippets.

Here are some plugins you could use

1. Age gate - https://wordpress.org/plugins/age-gate/
2. CPS age verification - https://wordpress.org/plugins/surbma-yes-no-popup/

read more about them here https://kinsta.com/blog/wordpress-age-verification/