Jquery 如何使Fancybox覆盖仅影响某些元素

标准Fancybox在整个身体上放置覆盖层。在fancybox JS或CSS中是否有一种方法可以使其仅将覆盖层放置在页面的某个元素上

谢谢

---

D.

根据您的要求更换

Fancybox.js

中的以下行

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

到

---

最后，我重写了以下部分：

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

a.helpers.overlay={
覆盖：空，
更新：函数（）{
变量a，c；
这个。叠加。宽度（0）。高度（0）；
e、 browser.msie？（a=Math.max（m.documentElement.scrollWidth，m.body.scrollWidth），c=Math.max（m.documentElement.offsetWidth，m.body.offsetWidth），a=a

其中页面介绍是我想要覆盖的元素，该元素的偏移量用于偏移覆盖

罗伯特

我想到了这个：

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

---

这将打开包装器div内的覆盖，并将图像的大小调整为包装器的大小。

在jquery.fancybox.js中找到这一行并更改所选div的appendTo，如果要将其定位在该div内，则需要将.fancybox覆盖定位更改为绝对

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

this.overlay=$（''）.appendTo（“.yourdiv”）；

对于希望位于覆盖层之上的元素，可以使用更大的z索引。谢谢jcubic。实际上，我希望覆盖层出现在包装器中，弹出窗口也会这样做，所以我认为z-index在这种情况下不会有帮助。我确实在页面的某些部分使用了z-index，但我重写了JS来完成我需要它做的事情。

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