WordPress自定义仅首次访问展示的18+年龄验证弹窗运行异常

核心故障原因 #

• WordPress默认开启jQuery无冲突模式，直接调用$会触发未定义错误，导致整段脚本不运行
• 弹窗容器未设置默认隐藏样式，加载后会直接显示在页面中
• localStorage设置逻辑错误：当前代码用户首次访问就直接标记为已展示，即使用户未点击同意，刷新后也不会再出现弹窗
• 事件绑定对象错误：代码中绑定的#snippet-ageTest-alertbox-close元素不存在，且点击弹窗任意区域就关闭的逻辑不符合年龄验证的合规要求

修复后的完整代码 #

以下代码直接替换你原有放在header.php中的对应内容即可：

<!-- 年龄验证弹窗样式 -->
<style>
#snippet-ageTest-alertbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.7); /* 半透明背景，不遮挡底层内容可见性 */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.age-test-square {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}
.age-test-square .title {
    margin-bottom: 20px;
    font-size: 18px;
}
.age-test-square .button-conversion {
    padding: 10px 25px;
    background: #2385bb;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
}
</style>

<!-- 年龄验证弹窗HTML结构 -->
<div id="snippet-ageTest-alertbox">        
    <div id="age-test" class="main_background">
        <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="javascript:;">
                    Pokračovat
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 年龄验证交互脚本 -->
<script type="text/javascript">
// 适配WordPress jQuery无冲突模式
jQuery(document).ready(function($) {
    // 仅未完成年龄验证的用户展示弹窗
    if(localStorage.getItem('age-test') != 'passed'){
        $("#snippet-ageTest-alertbox").delay(2000).fadeIn();
    }

    // 仅点击同意按钮才关闭弹窗并标记验证通过
    $('.agree.button-conversion').click(function(e) {
        e.preventDefault();
        $('#snippet-ageTest-alertbox').fadeOut();
        localStorage.setItem('age-test','passed');
    });
}); 
</script>

验证方法 #

• 打开浏览器隐私模式访问站点，首次进入会在2秒后弹出年龄验证窗
• 点击同意按钮后弹窗关闭，刷新页面或访问站点其他页面不会再弹出
• 清除浏览器本地存储后访问，弹窗会再次触发

内容的提问来源于stack exchange，提问作者MartyBiggies