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

My answer is an extension of @Loading's answer. The issue of a flash of content on page load, even when the user has chosen to dismiss the alert(s), is due to the evaluation for localStorage being done after the DOM is loaded.

Therefore, I would recommend hiding the alerts by default, even though this might be an issue for browsers with no JS enabled. This can, however, be circumvented if you use modernizr.js which will add a class to the HTML element when JS is detected, and you can modify the base styles accordingly, e.g.:

.alert-box {
  display: none;
}
.no-js .alert-box {
  display: block;
  /* Other styles */
}

My solution uses localStorage, and relies on storing options as a stringified object: the two keys stored per box is hidden (to store the status of the box) and timestamp (to store the time when the box is dismissed). These can be used to evaluate if (1) the user has chosen to dismiss the alert and (2) the action was performed within 24 hours.

Some modifications I have made to your code:

1. Use context-dependent selection, so that you don't have to declare multiple similar click event handlers for all alert boxes. This makes the code simpler and less redundant.
2. Use https for the image URL so that it doesn't mess with JSfiddle's HTTPS :)

The working code is shown as follows, but localStorage does not work on here due to security restrictions: for a functional demo, refer to the updated JSfiddle instead.

$(function() {
  // Check for localStorage
  if (typeof window.localStorage !== typeof undefined) {
    // Loop through all alert boxes
    $('.alert-box').each(function() {
      var $t = $(this),
        key = $t.attr('id');

      // If key exists and it has not expired
      if (window.localStorage.getItem(key)) {
        var json = JSON.parse(window.localStorage.getItem(key));
        if (json.hide && json.timestamp < Date.now() + 1000 * 60 * 60 * 24) {
          $t.hide();
        } else {
          $t.show();
        }
      } else {
        $t.show();
      }
    });
  }

  // Bind click events to alert boxes
  $('.alert-box a.alert-box-close').click(function() {
    var $alertBox = $(this).closest('.alert-box');

    // Hide box
    $alertBox.hide(800);

    // Store option in localStorage, using the box's ID as key
    if (typeof window.localStorage !== typeof undefined) {
      window.localStorage.setItem($alertBox.attr('id'), JSON.stringify({
        hide: true,
        timestamp: Date.now()
      }));
    }
  });

  // For demo purposes only, clear localStorage to ease testing
  $('#clear-localstorage').click(function() {
    window.localStorage.clear();
  });
});

.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

  
News Alerts
  
text text text text text text text text text text text text text text
  
    
  



  
Site Maintenance
  
text text text text text text text text text text text text text text
  
    
  


Clear local storage (for testing)