title: jQuery Modal window will not load
body: <p>I am working on a wordpress site and I need some overlay windows. They pop up fine when I am working locally but for some reason when I put my changes on the live server the window will not pop up. Anyone know why this is?</p>
  
  <p>The word "Aristokraft" in the sidebar of this page should trigger the window: <a href="http://friendlumber.com.s111208.gridserver.com/kitchens-and-baths/kitchens/cabinets" rel="nofollow">http://friendlumber.com.s111208.gridserver.com/kitchens-and-baths/kitchens/cabinets</a></p>
  
  <p>--html--</p>
  
  <pre><code>&lt;div id="popup_name" class="popup_block"&gt;
      &lt;div id="image"&gt;&lt;img src="img/doorbig.jpg" border="0"/&gt;&lt;/div&gt; 
          &lt;div id="gallery-shell"&gt;
          &lt;a href="#" rel="img/doorbig.jpg" class="image"&gt;&lt;img src="img/doorthumb.jpg" class="thumb" border="0"/&gt;&lt;/a&gt; 
          &lt;a href="#" rel="img/doorbig.jpg" class="image"&gt;&lt;img src="img/doorthumb.jpg" class="thumb" border="0"/&gt;&lt;/a&gt; 
          &lt;a href="#" rel="img/doorbig.jpg" class="image"&gt;&lt;img src="img/doorthumb.jpg" class="thumb" border="0"/&gt;&lt;/a&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>--trigger html--</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#?w=500" rel="popup_name" class="poplight"&gt;Aristokraft&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>--script--</p>
  
  <pre><code>$(document).ready(function() {
      //Code goes here
  
  
  
      //When you click on a link with class of poplight and the href starts with a # 
  $('a.poplight[href^=#]').click(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( 900 ) }).prepend('&lt;a href="#" class="close"&gt;&lt;img src="img/cancel.png" class="btn_close" title="Close Window" alt="Close" /&gt;&lt;/a&gt;');
  
      //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and 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 - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
  
      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;
  });
  
  
  
  
  });
  </code></pre>