JQuery Tools Multiple Overlay

Question

У меня небольшая проблема с наложением (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-индекс этой маски!

Например:

$('#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

Хотя этот вопрос не новый - могут быть некоторые пользователи набора инструментов с той же проблемой. Я использую очень простой взлом. Просто подождите миллисекунду, чтобы наложение было правильно настроено, затем я изменяю z-index. Просто как пирог:

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

Answer 4

У меня другая, но похожая проблема, и я столкнулся со следующим потенциальным решением:

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

Я еще не пробовал.