Question

我在Overlay（JQuery Tools）方面遇到了一些问题 - 我需要做的是允许用户点击叠加层中的其他叠加层。

问题是叠加层在已经激活的叠加层后面打开，这会导致问题，因为我需要在开放叠加层前加载。

有没有人知道如何加载多个叠加层，但要确保最后一个叠加层加载到前面？

这是我正在使用的代码......

/

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

我用它来打开第二个叠加层..

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

感谢。

Answer 1

我有类似的问题，我通过为所有涉及的元素设置z-index属性来解决它。在这里意识到非常重要的是，如果你使用掩码，你也需要设置该掩码的z-index！

例如：

$('#some_overlay_element').overlay({

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

    });

Answer 2

您可以使用此代码打开多重叠加，或使用不同遮罩覆盖叠加。
例如：

              //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 3

我遇到了一个不同但相似的问题，并遇到了以下潜在的解决方案：

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

我还没试过。

Answer 4

虽然这个问题并不新鲜 - 但可能会有一些工具箱用户遇到同样的问题。我正在使用一个非常简单的黑客。只需等待一个毫秒，允许正确设置叠加，然后我正在改变z-index。简单就像馅饼：

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

JQuery工具多重叠加

4 个答案: