Popup Improvements

JavaScript
2

I think it would be easier to simply write the date of dismissal to the localStorage… it’s a bit more straightforward, and you don’t need to communicate with the server anyway (unless you want to know if the popup has been dismissed by a given user). You certainly don’t need another library for it anyway. :-)

Just bind the same click handler to the overlay as to the “close” button. Together it might look like this:

<div id="popup111">
  <div class="image111">
    <input type="checkbox" id="never-again"/>
    <label for="never-again">Never show me again</label>  
    <a id="popup-close111" href="#">close</a>
  </div>
</div>
<div id="overlay111"></div>

<script>

var showPopup = function() {

    var overlay = document.getElementById('overlay111');
    var popup = document.getElementById('popup111');
    var closeLink = document.getElementById('popup-close111');
    var neverAgain = document.getElementById('never-again');
    
    var closePopup = function() {

        overlay.style.display = 'none';
        popup.style.display = 'none';
        
        if (neverAgain.checked) {
            localStorage.popupDismissed = Date.now();
        }
    };

    overlay.style.display = 'block';
    popup.style.display = 'block';

    closeLink.onclick = overlay.onclick = closePopup;
};

// Check if localStorage.popupDismissed either hasn't been set
// or has been set more than one year ago
if (!localStorage.popupDismissed ||
    Date.now() - localStorage.popupDismissed > 31536000000) {
    window.setTimeout(showPopup, 4000);
}

</script>