title: fancybox use divs instead of a href
body: <p>How can I use FancyBox or JQuery to create multiple pop-up DIVs that all use the same class (no IDs) on one page? For example, I have 50 products on a single page that all have the same class names.</p>
  
  <pre><code>&lt;div class="popup_box"&gt; &lt;!-- OUR PopupBox DIV--&gt;
      &lt;h1&gt;This IS A Cool PopUp 1&lt;/h1&gt;
      &lt;div class="closePopup"&gt;Close&lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="overlay_box"&gt;&lt;/div&gt;
  &lt;div class="menu_item_container"&gt; &lt;!-- Main Page --&gt;
      &lt;h1 class="container_header"&gt;Sample 1&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="popup_box"&gt; &lt;!-- OUR PopupBox DIV--&gt;
      &lt;h1&gt;This IS A Cool PopUp 2&lt;/h1&gt;
      &lt;div class="closePopup"&gt;Close&lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="overlay_box"&gt;&lt;/div&gt;
  &lt;div class="menu_item_container"&gt; &lt;!-- Main Page --&gt;
      &lt;h1 class="container_header"&gt;Sample 2&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="popup_box"&gt; &lt;!-- OUR PopupBox DIV--&gt;
      &lt;h1&gt;This IS A Cool PopUp 3&lt;/h1&gt;
      &lt;div class="closePopup"&gt;Close&lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="overlay_box"&gt;&lt;/div&gt;
  &lt;div class="menu_item_container"&gt; &lt;!-- Main Page --&gt;
      &lt;h1 class="container_header"&gt;Sample 3&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready( function() {
  
          // When site loaded, load the Popupbox First
          $('.container_header').click( function() {          
              loadPopupBox();
          });
  
      $('.closePopup').click( function(){
  
              unloadPop()
  
          });
  
  
  
      });
  
      function loadPopupBox() {   // To Load the Popupbox
              $('.popup_box').fadeIn("slow");
              $('.overlay_box ').fadeIn("slow");      
          }
  
          function unloadPop(){
  
              $('.popup_box').fadeOut("slow");
              $('.overlay_box ').fadeOut("slow");
              }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>THE CSS</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  /* popup_box DIV-Styles*/
  .overlay_box{
      display:none;
      position:fixed;  
      _position:absolute; /* hack for internet explorer 6*/  
      height:100%;  
      width:100%;  
      top:0;  
      left:0;  
      background:#000000;  
      border:1px solid #cecece;  
      z-index:1; 
  
  
      }
  .popup_box { 
      display:none; /* Hide the DIV */
      position:fixed;  
      _position:absolute; /* hack for internet explorer 6 */  
      height:300px;  
      width:600px;  
      background:#FFFFFF;  
      left: 300px;
      top: 150px;
      z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
      margin-left: 15px;  
  
      /* additional features, can be omitted */
      border:2px solid #ff0000;   
      padding:15px;  
      font-size:15px;  
      -moz-box-shadow: 0 0 5px #ff0000;
      -webkit-box-shadow: 0 0 5px #ff0000;
      box-shadow: 0 0 5px #ff0000;
  
  }
  
  .menu_item_container{
      background: #d2d2d2; /*Sample*/
      width:100%;
      height:100%;
  }
  
  h1.container_header{  
  cursor: pointer;  
  } 
  
  /* This is for the positioning of the Close Link */
  .closePopup {
      font-size:20px;  
      line-height:15px;  
      right:5px;  
      top:5px;  
      position:absolute;  
      color:#6fa5e2;  
      font-weight:500;    
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>It should work like this example (please click on the product to test pop-up):</p>
  
  <p><a href="http://www.grubhub.com/order.jsp?custId=263838&amp;cityId=5&amp;orderId=18429055&amp;searchable=true&amp;deliverable=true&amp;verified=false&amp;poiSearchTerm=null" rel="nofollow">http://www.grubhub.com/order.jsp?custId=263838&amp;cityId=5&amp;orderId=18429055&amp;searchable=true&amp;deliverable=true&amp;verified=false&amp;poiSearchTerm=null</a></p>