title: How do you create a custom css pop-up to open on page load once per visitor per week
body: <p>Okay I have the below code, which will allow me to either click the link or hover over the link to show the pop-up.  I would like to be able to edit it to make it open on page load.  I would also like to be able to have it open only once per visitor per week.</p>
  
  <p>I am new to this so any help would be great!</p>
  
  <p>Thanks</p>
  
  <pre><code>    &lt;head&gt;
  
  &lt;style type="text/css"&gt;
  #fade {
      display: none;
      background: #000; 
      position: fixed; left: 0; top: 0; 
      z-index: 10;
      width: 100%; height: 100%;
      opacity: .80;
      z-index: 9999;
  }
  .popup_block{
      display: none;
      background: #fff;
      float: left;
      font-size: 1.2em;
      position: fixed;
      padding: 20px;     
      border: 20px solid #ddd;
      top: 50%; left: 50%;
      z-index: 99999;
      -webkit-box-shadow: 0px 0px 20px #000;
      -moz-box-shadow: 0px 0px 20px #000;
      box-shadow: 0px 0px 20px #000;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
  }
  img.btn_close {
      float: right; 
      margin: -55px -55px 0 0;
  }
  .popup p {
      padding: 5px 10px;
      margin: 5px 0;
  }
  /*--Making IE6 Understand Fixed Positioning--*/
  *html #fade {
      position: absolute;
  }
  *html .popup_block {
      position: absolute;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;a href="#?w=200" rel="popup1" class="poplight"&gt;Hover to see pop-up&lt;/a&gt;
  
  &lt;div id="popup1" class="popup_block"&gt;
  TEST    
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      //When you click on a link with class of poplight and the href starts with a # 
      $('a.poplight[href^=#]').hover(function() {
          var popID = $(this).attr('rel'); //Get Popup Name
          var popURL = $(this).attr('href'); //Get Popup href to define size
  
          //Pull Query &amp; Variables from href URL
          var query= popURL.split('?');
          var dim= query[1].split('&amp;');
          var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  
          //Fade in the Popup and add close button
          $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('&lt;a href="#" class="close"&gt;&lt;img src="http://www.sohtanaka.com/web-design/examples/modal-window/close_pop.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;');
  
          //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
          var popMargTop = ($('#' + popID).height() + 80) / 2;
          var popMargLeft = ($('#' + popID).width() + 80) / 2;
  
          //Apply Margin to Popup
          $('#' + popID).css({ 
              'margin-top' : -popMargTop,
              'margin-left' : -popMargLeft
          });
  
          //Fade in Background
          $('body').append('&lt;div id="fade"&gt;&lt;/div&gt;'); //Add the fade layer to bottom of the body tag.
          $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
  
          return false;
      });
  
  
      //Close Popups and Fade Layer
      $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
            $('#fade , .popup_block').fadeOut(function() {
              $('#fade, a.close').remove();  
      }); //fade them both out
  
          return false;
      });
  
  
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>