javascript - jQuery 关闭 Div 窗口 + cookie

Question

我创建了一个简单的 div 元素，其中包含一个通知和一个用于切换元素的关闭按钮

jQuery('.float_close').click(function() {
                jQuery('.float_notice').fadeToggle('slow');

使用 cookie 将其关闭有多难？

Answer 1

没那么难，但我建议在jQuery之上为此使用一个额外的 JavaScript 插件（ http://plugins.jquery.com/cookie/ ） 。

if ($.cookie('noticeVisibility') !== undefined
        && $.cookie('noticeVisibility') === 'hidden') {

    // If a cookie that stores the visibility
    // of the notice was set and it says 'hidden', hide the notice 
    jQuery('.float_notice').hide();
}

jQuery('.float_close').click(function () {
    jQuery('.float_notice').fadeToggle('slow');

    // Saves a cookie for later
    $.cookie('noticeVisibility', 'hidden');
});

Answer 2

您是否希望模式不再加载（或在某个指定的时间范围内），即使用户重新访问该页面？如果这就是你想要的，那么 cookie 是可以接受的，但并不理想；如果用户禁用了他们的 cookie，他们将不断地看到模态。

如果您想使用 cookie，您只需在 click 事件中设置它，并在触发模态（或绑定到最终触发模态的事件）之前检查它是否已设置。设置 cookie 非常简单（有关教程和一些功能，请参见http://www.quirksmode.org/js/cookies.html）。以下 cookie 将在一小时后过期（直接取自：How to set a cookie to expire in 1 hours in Javascript?）。

var now = new Date();
var time = now.getTime();
time += 3600 * 1000;
now.setTime(time);
document.cookie = 
    'username=' + value + 
    '; expires=' + now.toGMTString() + 
    '; path=/';

如果您希望在用户下次访问页面（或刷新页面）时显示模态，您可以将该信息存储在 javascript 中（或取消绑定触发模态的事件）。只需在您的 javascript 中设置一个布尔值（注意范围）：

var modalDismissed = false;

并在您的点击事件中，将其设置为 true：

jQuery('.float_close').click(function() {
    jQuery('.float_notice').fadeToggle('slow');
    modalDismissed = true;
});

然后在弹出模态之前检查以确保 modalDismissed 为 false：

if (!modalDismissed) {
    // modal
}