WordPress中Cookie弹窗无刷新关闭按钮的实现求助

嘿，我看了你的代码，找到了两个核心问题：一是关闭按钮的<a>标签没阻止默认跳转行为，点击后直接触发页面刷新；二是关闭弹窗时没有设置Cookie，导致刷新页面后因为检测不到Cookie，弹窗又会重新出现。下面是具体的修复方案：

1. 修复JavaScript逻辑 #

修改custom.js里的代码，既阻止跳转行为，又在关闭时同步设置Cookie：

// ========================= Ajax for Set cookie ======================= 
$(document).ready(function(){
    // 抽离共用逻辑：设置Cookie并隐藏弹窗
    function acceptCookieAndHidePopup() {
        var data = {
            type: 'json',
            action: 'setCookiePopup'
        };
        jQuery.post(ajax_url.ajaxurl, data, function(response) {
            var res = jQuery.parseJSON(response);
            if (res.result) {
                $('#cookie_modal_body').hide(); // 用hide比remove更灵活，后续调整需求更方便
            }
        });
    }

    // 处理Accept按钮点击
    jQuery('#cookie_btn').click(function(e){
        e.preventDefault();
        acceptCookieAndHidePopup();
    });

    // 处理关闭按钮点击
    $('#close_img_btn_anchor').click(function(e){
        e.preventDefault(); // 关键！阻止a标签的默认刷新行为
        acceptCookieAndHidePopup(); // 关闭时也要设置Cookie，避免刷新后弹窗重现
    });
});

2. 优化弹窗HTML结构（可选但更合理） #

你当前的关闭按钮是<button>嵌套<a>，其实完全可以去掉<a>标签，直接用按钮元素，从根源避免默认跳转问题。修改functions.php里的弹窗代码：

$popup .= '<button class="close_img" id="close_img_btn">X</button>';

对应的JS事件也要改成监听按钮点击：

// 替换原来的close_img_btn_anchor事件
$('#close_img_btn').click(function(e){
    e.preventDefault();
    acceptCookieAndHidePopup();
});

3. 微调PHP的Cookie返回逻辑（可选） #

你PHP代码里返回的'result' => 'true'是字符串类型，JS判断没问题，但改成布尔值会更严谨：

echo json_encode(array('result' => true));

问题根源说明 #

之前点击关闭按钮时，<a href="">会触发浏览器默认行为——跳转到当前页面（空href等同于刷新），页面重新加载后，因为关闭时没设置Cookie，!isset($_COOKIE[$cookie_name])结果为真，弹窗就会再次显示。现在加上e.preventDefault()阻止跳转，同时调用设置Cookie的接口，就能实现无刷新关闭，且后续刷新页面也不会再弹出弹窗。

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