title: JQuery Tools Multiple Overlay
body: <p>I am having a slight issue with Overlay (JQuery Tools) - what I need to do is allow people to click on another overlay from overlay.</p>
  
  <p>The problem is that the overlay opens behind the already active overlay, which causes issues because I need it to load in front of the open overlay.</p>
  
  <p>Does anyone know how I can load multiple overlay's but make sure the last overlay loads in-front?</p>
  
  <p>This is the code I am using ...</p>
  
  <p>/</p>
  
  <pre><code>/ select the overlay element - and "make it an overlay"
   $("#overlay").overlay({
   // custom top position
    //top: 200,
    // some mask tweaks suitable for facebox-looking dialogs
    mask: {
     // you might also consider a "transparent" color for the mask
     color: '#fff',
     // load mask a little faster
     loadSpeed: 200,
     // very transparent
     opacity: 0.8
    },
    // disable this for modal dialog-type of overlays
    closeOnClick: true,
    // load it immediately after the construction
    load: false,
    oneInstance: false
   });
  
    // Modal on click
    $("a[rel]").overlay({
     // disable this for modal dialog-type of overlays
     closeOnClick: true,
     top: '3%',
     mask: {
      color: '#fff',
      loadSpeed: 200,
      opacity: 0.8
     },
     onBeforeLoad: function() {
      // grab wrapper element inside content
      var wrap = this.getOverlay().find(".contentWrap");
  
      // load the page specified in the trigger
      wrap.load(this.getTrigger().attr("href"));
     },
     oneInstance: false
    });
  </code></pre>
  
  <p>I am using this to open the second overlay ..</p>
  
  <pre><code>&lt;a href="external.html" rel="#overlay"&gt;Link&lt;/a&gt;
  </code></pre>
  
  <p>Thanks.</p>