JQuery Tools Multiple Overlay

Question

J'ai un léger problème avec Overlay (JQuery Tools) - ce que je dois faire est de permettre aux gens de cliquer sur une autre superposition de superposition.

Le problème est que la superposition s'ouvre derrière la superposition déjà active, ce qui cause des problèmes car j'en ai besoin pour charger devant la superposition ouverte.

Est-ce que quelqu'un sait comment je peux charger plusieurs superpositions, mais je m'assure que la dernière superposition se charge à l'avant?

C'est le code que je utilise ...

/

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

J'utilise cette option pour ouvrir la deuxième superposition ..

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

Merci.

Answer 1

je rencontre un problème différent mais similaire et a couru dans la solution potentielle:

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

Je n'ai pas encore essayé.

Answer 2

J'ai eu un problème similaire et je l'ai résolu en définissant la propriété z-index pour tous les éléments impliqués. Très important à réaliser ici est que si vous utilisez un masque, vous devez également définir l'index z de ce masque!

Par exemple:

$('#some_overlay_element').overlay({ 

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

    }); 

Answer 3

Vous pouvez utiliser ce code pour ouvrir overlay se multiplient, ou superposer sur superposition avec un masque différent.
Par exemple:

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


       } 
       }); 

Answer 4

Bien que cette question n'est pas frais - il peut y avoir certains utilisateurs de la boîte à outils là-bas avec le même problème. J'utilise un hack très simple. Il suffit d'attendre une milliseconde pour que l'overlay soit correctement configuré, puis je change l'index z. Simple comme une tarte:

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