When a user closes a , hide that on all site pages

Question

I\'ve developed a couple of alert boxes that display on all site pages.

The user is able to close each box separately:

Answer 1

You can go with the code you have plus setting a cookie which expires in 24 hours:

1. Install the MDN JavaScript Cookie Framework

2. On your js set a tomorrow variable holding the expiration date for your cookie:

   var today = new Date();
   var tomorrow = today.setHours(today.getHours() + 24);
   

3. Set your cookies as follows:

   docCookies.setItem('hide_news', 'true', tomorrow);
   

4. Conditionally hide the boxes based on the cookie's value

   if (docCookies.getItem('hide_news') == 'true'){
     $("#alert-box-news").add_class('hidden');
   };
   

5. Define the hidden class on your CSS file

   .hidden {
     display none;
   }
   

You can see it all in action in this codepen.