如何使Fancybox疊加僅影響某些元素

Question

標準Fancybox在整個正文上放置疊加。在fancybox JS或CSS中有沒有辦法讓我只能將疊加層放在頁面的某個元素上？

感謝 D.

Answer 1

在Fancybox.js替換以下行按您的要求

overlay.css('height', $(document).height()); 

到

overlay.css('height', $("yourdiv").height()); 
overlay.css('height', $("yourdiv").width()); 

Answer 2

在我改寫了以下部分末尾：

a.helpers.overlay = { 
    overlay: null, 
    update: function() { 
     var a, c; 
     this.overlay.width(0).height(0); 
     e.browser.msie ? (a = Math.max(m.documentElement.scrollWidth, m.body.scrollWidth), c = Math.max(m.documentElement.offsetWidth, m.body.offsetWidth), a = a < c ? l.width() : a) : a = q.width(); 

     var w = $('#page-introduction').width(); 
     var h = $('#page-introduction').height(); 

     this.overlay.width(w).height(h) 
     $('#fancybox-overlay').offset($('#page-introduction').offset()) 
    }, 
    beforeShow: function (b) { 
     this.overlay || (b = e.extend(!0, { 
      speedIn: "fast", 
      closeClick: !0, 
      opacity: 1, 
      css: { 
       background: "black" 
      } 
     }, 
     b), this.overlay = e('<div id="fancybox-overlay"></div>').css(b.css).appendTo("body"), this.update(), b.closeClick && this.overlay.bind("click.fb", a.close), l.bind("resize.fb", e.proxy(this.update, this)), this.overlay.fadeTo(b.speedIn, b.opacity)) 
    }, 
    onUpdate: function() { 
     this.update() 
    }, 
    afterClose: function (a) { 
     this.overlay && this.overlay.fadeOut(a.speedOut || 0, function() { 
      e(this).remove() 
     }); 
     this.overlay = null 
    } 
}; 

其中page-introduction是我想疊加的元素，並且此元素的偏移量用於偏移疊加層。

羅伯特

Answer 3

我想出了這個：

helpers: { 
      overlay : { 
        css : { 
         'height': $('.fancyboxwrapper').height(), 
         'width': $('.fancyboxwrapper').width(), 
         'top': $('.fancyboxwrapper').offset().top, 
         'left': $('.fancyboxwrapper').offset().left, 
         'overflow': 'hidden' 
        } 
       } 
      } 

就此拉開覆蓋包裝的div內，還調整了圖像的大小包裝的大小。

Answer 4

在jquery.fancybox.js中查找此行並將appendTo更改爲您選擇的div，如果您想將其定位在該div內，則需要將.fancybox-overlay定位更改爲絕對。

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo(".yourdiv");