jQuery Cookie隐藏/显示div

时间:2014-02-05 19:51:40

标签: javascript jquery html css cookies

我正在尝试使用jQuery Cookie设置Cookie,以便为新访问者显示提醒,当您点击“关闭”按钮时,它会设置一个Cookie并阻止显示提醒div。我还想让cookie在24小时后过期。

我已经使用了一些代码并使其工作,但是,我现在的方式,默认显示警报div,只有在您单击关闭时才隐藏。这很好,但是当cookie存在时,警报会在隐藏之前显示一瞬间。

我如何修改以下代码,以便我可以默认隐藏div,如果cookie不存在则会显示,但如果他们点击关闭按钮,它将生成一个cookie并隐藏警报24小时?

if ($.cookie('alert')) $('.alert-box').hide();
else {
    $(".close").click(function() {
        $( ".alert-box" ).slideUp( "slow", function() { });
        $.cookie('alert', true);
    });
}

1 个答案:

答案 0 :(得分:8)

默认情况下,您可以使用CSS隐藏警告框,并在没有cookie时使用JavaScript显示警告框:

CSS:

.alert-box {
    display: none;
}

JavaScript的:

// if no cookie
if (!$.cookie('alert')) {
    $( ".alert-box" ).show();
    $(".close").click(function() {
        $( ".alert-box" ).slideUp( "slow" );
        // set the cookie for 24 hours
        var date = new Date();
        date.setTime(date.getTime() + 24 * 60 * 60 * 1000); 
        $.cookie('alert', true, { expires: date });
    });
}