Popup Improvements

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;

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

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>

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.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.