title: Close overlay on page refresh/revisit
body: <p>I have the following HTML, CSS, and Javascript:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  
  function getTarget(event){
      target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
      return target;
  }
  
  document.onclick = function(event){
      var target = getTarget(event);
      if(target.id == ""){
          var overlay = document.getElementById('overlay');
          var specialBox = document.getElementById('specialBox');
          var button = document.getElementById('qualityButton');
          overlay.style.display = "none";
          specialBox.style.display = "none";
          button.style.color="#000000";
      }
  
  }
  
  
  function toggleOverlay(){
      var overlay = document.getElementById('overlay');
      var specialBox = document.getElementById('specialBox');
      var button = document.getElementById('qualityButton');
      overlay.style.opacity = .7;
      if(overlay.style.display == "block"){
          overlay.style.display = "none";
          specialBox.style.display = "none";
          button.style.color="#000000";
      } else {
          overlay.style.display = "block";
          specialBox.style.display = "block";
          button.style.color="#ff0000";
      }
  }
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  
  div#overlay {
      display: none;
      z-index: 2;
      background: #A9A9A9;
      position: fixed;
      width: 879px;
      height: 291px;
      top: 50px;
      left: 0px;
      text-align: center;
  }
  div#specialBox {
      display: none;
      position: fixed;
      z-index: 3;
      width: 719px; 
      height: 215px;
      top: 88px;
      left: 80px;
      background: #FFF;
  }
  div#wrapper {
      position:absolute;
      top: 0px;
      left: 0px;
      padding-left: 24px;
  }
  &lt;/style&gt;
  
  &lt;style type="text/css"&gt;
      .btn {
          cursor:pointer;
          font-size:24px;
          border:none;
          color:#000
  }
      .btn:hover{ 
      color:#F00; 
      }
  &lt;/style&gt;
  
  &lt;style type="text/css"&gt;
      .x {
          background-color:white;
          cursor:pointer;
          font:Arial;
          font-size:14px;
          color:red;
          z-index: 4;
          position: fixed;
          top: 92px;
          left: 766px;
      }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- Start Overlay --&gt;
  &lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;!-- End Overlay --&gt;
  &lt;!-- Start Special Centered Box --&gt;
  &lt;div id="specialBox"&gt;
    &lt;button class="x" onmousedown="toggleOverlay()"&gt;X&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- Start Special Centered Box --&gt;
  &lt;!-- Start Normal Page Content --&gt;
  &lt;div id="wrapper"&gt;
    &lt;button id="qualityButton" class="btn" onmousedown="toggleOverlay()"&gt;HIGHEST QUALITY&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- End Normal Page Content --&gt;
  
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The overlay opens and closes just fine. However, if the overlay is opened and the user visits another page on the website, and returns to the original page where the overlay was, the overlay still remains open...Is there a way to make the overlay close upon refreshing the page and upon returning to the page having visited another one?</p>
  
  <p>Any help is much appreciated :)</p>
  
  <p>James</p>