title: jQuerytools Overlay with mask
body: <p>I can't get the overlay to show up nicely on my site, all I want is a simple lightbox with an iframe that pulls the href from the link its clicked on and displays it on top of an overlay. I have jQueryTools setup on my site so I thought I could use their overlay functionality. Here is my code:</p>
  
  <pre><code> $(function(){
      $("body").append('&lt;div class="oiOverlay" id="overlay"&gt;&lt;div class="oiContentWrap"&gt;&lt;/div&gt;&lt;/div&gt;');
      $("a[rel]").overlay({
          mask: '#000',
          closeOnClick: false,
          onBeforeLoad: function() {
              // grab wrapper element inside content
              var wrap = this.getOverlay().find(".oiContentWrap");
              // load the page specified in the trigger
              wrap.load(this.getTrigger().attr("href"));
          }
      });
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#overlay { display: none; width:625px; z-index: 1000; min-height:200px; border:1px solid #000; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="http://www.google.com" rel="overlay"&gt;Google overlay&lt;/a&gt;
  </code></pre>
  
  <p>What I am getting is a box that's aligned to the left instead of the center and no background/mask/overlay effect behind it. I can't figure out what I've missed, this is the page I followed when writing my code: <a href="http://jquerytools.org/demos/overlay/styling.html" rel="nofollow">http://jquerytools.org/demos/overlay/styling.html</a></p>
  
  <p>UPDATE: I gave up on JQuerytools overlay and created my own</p>