WordPress - 自定义 18+ 弹出警报无法正常工作

Question

我尝试制作自定义 18+ 警报（仅在首次访问时），但它不起作用.. 基本上在自定义 html 模板中它可以工作，但在 WordPress 上没有 The view on the website 和here，它应该看起来如何，但必须有的是网站的访问者必须看到该网站，这就像模态一样..

第二点必须是，它应该只在第一次访问时显示，当我点击“POKRAČOVAT”按钮后，这个警报应该消失并且不会显示在网站上的任何地方。 我已经尝试了一种 cookie 方式，通过。 Make a splash screen appear only on first visit in Wordpress（接受的答案）

我也尝试过这种方式：Display A Popup Only Once Per User（也接受了答案）但它对我不起作用..让我在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

您需要设置并检查 cookie。由于这不是 jQuery 原生的，因此您需要一个函数。然后就像您尝试的那样，您想在显示弹出窗口之前检查 cookie 是否已设置。

可以在此处找到一个 javascript cookie 示例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.
    }
});