JQuery Tools Multiple Overlay

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.

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.

Does anyone know how I can load multiple overlay's but make sure the last overlay loads in-front?

This is the code I am using ...

/

/ 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
  });

I am using this to open the second overlay ..

<a href="external.html" rel="#overlay">Link</a>

Thanks.

I had a similar problem and I solved it by setting the z-index property for all involved elements. Very important to realize here is that if you use a mask you need to set the z-index of that mask too!

For example:

$('#some_overlay_element').overlay({

        mask: {
            maskId: "defaultMask" ,
            color: null ,
            zIndex: 9001
        },
        effect: "apple",
        zIndex: 9100

    });

You can use this code to open multiply overlay, or overlay over overlay with different mask.
For Example:

              //Global Variable//
              var zindx=99999;

              var mask_Zindex=99990;

               //Code to open the Overlay//
                    $("yourDynamicID").overlay({  
                effect: 'apple',
                oneInstance:false,
                closeOnClick: false,
                closeOnEsc: false,
                zIndex: ++zindx,
                api: true,
                load: true,
                onBeforeLoad: function () {
                    var wrap = this.getOverlay().find(".contentWrap");
                    wrap.load(this.getTrigger().attr("href"));
                },
                onLoad: function(){                 
                    if($.mask.isLoaded()) {
                        //this is a second overlay, get old settings
                        oldMaskZ[counters] = $.mask.getConf().zIndex;
                        $oldMask[counters] = $.mask.getExposed();
                        $.mask.getConf().closeSpeed = 0;
                        $.mask.close();

                        counters++;
                    this.getOverlay().expose({
                            color: 'darkgrey',
                            zIndex: mask_Zindex,
                            closeOnClick: false,
                            closeOnEsc: false,
                            maskId: maskID,
                            loadSpeed: 0,
                            closeSpeed: 0
                        });
                    }else{

                        this.getOverlay().expose({
                            color: 'darkgrey',
                            zIndex: mask_Zindex,
                            maskId: maskID,
                            closeOnClick: false,
                            closeOnEsc: false
                        });

                    }
                    //Other onLoad functions
                },
                onClose: function(){
                    counters--;
                   // $.mask.close();
                    //re-expose previous overlay if there was one
                    if($oldMask[counters] == null){
                        $.mask.close();  
                    }


                }
                });

I am having a different but similar problem and ran into the following potential solution:

http://sdevgame.wordpress.com/2011/01/26/modal-on-modal-with-jquery-tools/

I have not yet tried it.

Though this the question is not fresh - there may be some toolbox users out there with the same problem. I'm using a very simple hack. Just wait for a milisecond allowing the overlay to be set up correctly then I'm changing the z-index. Simple as pie:

window.setTimeout(function(){ 
     $("#YourSecondOverlayIdName").css("z-index", "11000"); 
},60);