CODEWITHSUNDEEP
javascriptjquery
David Garcia
David Garcia

Reputation: 2696

jQuery Close Div Window + cookie

I have created a simple div element with a notice and a close button that toggles the element

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

modal

How hard is it to keep it closed possibly by using cookies?

Upvotes: 0

Views: 519

Answers (2)

federicot
federicot

Reputation: 12341

Not that hard, but I'd recommend using an additional JavaScript plugin for this (http://plugins.jquery.com/cookie/) on top of jQuery.

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');
});

Upvotes: 2

Pete Scott
Pete Scott

Reputation: 1526

Do you want the modal to not load again ever (or within some specified time frame), even if the user re-visits the page? If that's what you are going for so, a cookie would be acceptable, but not ideal; if the user disabled their cookies they would be presented with the modal continuously.

If you want to use a cookie, you'd simply set it inside of the click event, and check to see if it has been set before triggering the modal (or binding to the event that ultimately triggers the modal). Setting a cookie is pretty simple (see http://www.quirksmode.org/js/cookies.html for a tutorial and some functions). The following cookie would expire after one hour (taken directly from: How to set a cookie to expire in 1 hour in Javascript?).

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

If you want the modal to be presented the next time a user visits the page (or refreshes the page), you can store that information in the javascript (or unbind the event that triggers the modal). Just set a boolean in your javascript (pay attention to scope):

var modalDismissed = false;

and in your click event, set that to true:

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

Then check to ensure modalDismissed is false before popping up the modal:

if (!modalDismissed) {
    // modal
}

Upvotes: 1

Related Questions