fancybox 无法正确加载内容答案

【问题标题】：fancybox doesnot load the content properlyfancybox 无法正确加载内容
【发布时间】：2025-12-28 13:15:06
【问题描述】：

所以我在正文中附加了一个 div，这个 div 实际上会在点击图像a 标签时弹出。为了实现body叠加效果，我使用的是fancybox。但是我可以将 div 附加到正文，但是这个 div 不会作为花式框加载。有人可以在这里帮忙吗：

我的代码在这里：

http://jsfiddle.net/refhat/xap9F/60/

我还遗漏了fancybox中的某些内容，我也没有在chrome中看到fancybox右上角的关闭十字，单击fancybox上的任意位置只会关闭fancybox，情况并非如此。

【问题讨论】：

您似乎无法直接从他们的服务器中包含fancybox CSS（当然fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css 给了我一个 403 Forbidden。）您是否也在实际代码中这样做，或者只是在 jsFiddle 上？
另外，您究竟是如何尝试使用 Fancybox 的？也许我很密集，但我所看到的只是当您单击元素时您将一个新的 DIV 扔到您的文档中。我看不到任何将该内容连接到 Fancybox 的内容？而且我在 Fancybox 文档中看不到任何暗示您可以做到这一点并且有任何工作的东西......
我只需要使用叠加效果，所以我用fancybox试了一下。有没有更好的方法来实现不使用fancybox的叠加效果。

标签： javascript jquery dom jquery-plugins fancybox

【解决方案1】：

以下是一些可用于创建叠加层的代码：

overlay = function () {
    var o, c;
    this.create = function (html) {
        o = $('<div />');
        c = $('<div />');
        h = $('<div>' + html + '</div>').appendTo(c);

        var o_css = {
            'position': 'absolute',
            'top': '0',
            'left': '0',
            'width': '100%',
            'height': '100%',
            'background': '#000', // Background of the overlay (opacity is set later)
            'z-index': '10000',
            'overflow': 'hidden'
        };
        var c_css = {
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            'width': '300px', // Width of content box
            'height': '200px', // Height of the content box
            'margin-left': '-150px', // Half of content width (used to center the box)
            'margin-top': '-100px', // Half of content height (used to center the box)
            'background': '#fff', // Background of the content
            'color': '#000', // Text color
            'z-index': '10001'
        };
        var h_css = { 'padding': '10px' }; // If you want paddning

        o.css(o_css);
        c.css(c_css);
        h.css(h_css);

        o.fadeTo(0, 0).appendTo('body').fadeTo(500, 0.5); //0.5 is opacity, change from 0.1-1.0
        c.fadeTo(0, 0).appendTo('body').fadeTo(500, 1.0); //1.0 is opacity, change from 0.1-1.0
    }
    this.remove = function () {
        o.remove();
        c.remove();
    }
}

你这样称呼它：

$(document).ready(function () {
    o = new overlay();
    o.create('HTML you want to fill the container with, example and image or/and text or maybe a link you later bind o.remove() to'); //This creates the overlay
    o.remove(); // .. and this removes the overlay
});

【讨论】：