如何用jQuery Cookie实现弹窗关闭后不再显示？现有代码失效求助

嘿，我瞅了下你的代码，问题出在逻辑顺序完全搞反啦！现在的操作是点击关闭按钮后，先把弹窗藏起来，然后反而去判断cookie——如果没cookie就设置cookie再把弹窗重新显示出来，这和你想要的「关闭后不再显示」完全背道而驰，而且页面加载时也没做cookie判断，不管啥情况弹窗都会默认显示。

给你修正后的完整代码，逻辑完全理顺了：

HTML 结构 #

<div id="popup">
    <div class="closeme"><i class="far fa-window-close"></i></div>
    <h2>Test popup</h2>
</div>

<!-- 注意脚本加载顺序：先jQuery，再jQuery Cookie，最后自定义脚本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

CSS 样式 #

#popup {
    background-color: #f8f8f8;
    padding: 20px;
    width: 400px;
    position: relative;
    /* 默认隐藏弹窗，避免页面加载时闪一下 */
    display: none;
}
#popup h2 {
    font-size: 25px;
}
.closeme {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

JavaScript 逻辑 #

$(document).ready(function() {
    // 页面加载时判断：无cookie则显示弹窗
    if ($.cookie('whenToShowDialog') == null) {
        $('#popup').show();
    }

    // 点击关闭按钮：隐藏弹窗 + 设置过期cookie
    $('.closeme').click(function() {
        $('#popup').hide();
        $.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });
    });
});

关键调整点说明： #

• 给弹窗默认加了display: none，避免页面刚加载时弹窗意外闪现
• 页面初始化时先检查cookie，只有首次访问（无cookie）才显示弹窗
• 关闭按钮的逻辑简化为「隐藏弹窗+设置cookie」，完全贴合需求

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