Popup Improvements

[NCroke221]

Good Afternoon,
Last year i had help from someone on your forums with a popup and it worked wonders for the company I work for. My next question is based on adding features to the current popup we have.

This was the original thread;

Simple Popup Window in JavaScript

Hello There, I’m looking for a simple popup that can be displayed after 10 seconds of someone being on the page, but only appearing once per customer once a day. I have come across this code that was previously posted on a separate thread, the popup works exactly how i want it, apart from it’s an iFrame, I was looking for inline content if possible, that can be easily changed. http://www.sitepoint.com/community/t/need-a-simple-popup-modal-on-page-load-with-time-delay-fast-clean/36860 <!DOCTY…

My code reads like this;
HTML:

<div id="popup111">
  <div class="image111">
  <img src="popupnew.png"  usemap="#metroid11" ismap="ismap" style="width:714px;">
  <map name="metroid11">
   <area shape="rect" coords="365,350,520,380" href="#">
   <area shape="rect" coords="530,350,695,380" <a id="popup-close111" href="#"></a>
  </map>
  </div>
 </div>
<div id="overlay111"></div>

Javascript:

<script>
 setTimeout(function(){

   var overlay = document.getElementById('overlay111');
   var popup = document.getElementById('popup111');
   var closeLink = document.getElementById('popup-close111');

overlay.style.display = ‘block’;
popup.style.display = ‘block’;
closeLink.onclick = function(){
overlay.style.display = ‘none’;
popup.style.display = ‘none’;
}

 }, 4000);
if(!$.cookie("overlay111")){
     openColorBox();
     $.cookie('overlay111', true, { expires: 1, path: '/' });
    }
     if(!$.cookie("popup111")){
    openColorBox();
    $.cookie('popup111', true, { expires: 1, path: '/' });
}
</script>

CSS:

  #popup111, #overlay111 {
  display:none;
  position:absolute;
  }

  #overlay111 {
  background:rgba(0,0,0,0.65);
  width:100%; height:100%;
  left:0; top:0;
  z-index:1;
  }

  #popup111 {
  left:20%; top:25%;
  width:700px;
  background:#FFF;
  z-index:2;
  font-family: sans-serif;
  }
  #popup-close111 {
  float: right;
  padding: 8px;
  font-weight: 600;
  color: #000;
  text-decoration: underline;
  }
  #popup-close111 a {
  color: #FFF;
  font-weight: 600;
  }
  .text111 {
  width: 300px;
  float: left;
  }
  .text111 h1 {
  font-size: 18px;
  color: #183F75;
  text-align:center;
  margin-bottom: 20px;
  }
  .text111 p {
    font-size: 16px;
  }
  .text111 h3 {
  background: #183F74;
  padding: 10px;
  padding-left: 14px;
  font-size: 13px;
  color: #FFF;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
  margin-top: 5px;
  }
  .text111 h4 {
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .text111 h5 {
    font-size: 15px;
    text-align: center;
    margin-top: 25px;
  }
  .image111 {
  width: 711px;
  overflow:hidden;
  float: left;
  background: #FFF;
  }
  .image111 img {
  float: left;
}

Now I’m looking at improving this if possible, I’ve played around as much as possible but couldn’t figure it out. I want to be able to have a tickbox to say “never show me this again” which would save in their cookies to never show the message for another year maybe?

And also make it possible so if they click outside the popup area it will also shut down the popup.

Hope you can help.

Kind Regards,
Niall

[m3g4p0p]

@NCroke221

I want to be able to have a tickbox to say “never show me this again” which would save in their cookies to never show the message for another year maybe?

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. :-)

@NCroke221

And also make it possible so if they click outside the popup area it will also shut down the popup.

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>

[Stomme_poes]

It would also be m0aR awesome if those clickable areas had some alt text. if something’s clickable, it ought to always have a name.