2011-09-12 113 views
5

因此,我正在追加一个div到正文,这个div将弹出实际上点击图像a标签。为了达到人体覆盖效果,我使用了fancybox。但是我能够将div附加到body,但是这个div不能作为fancybox加载。有人可以帮助这里:fancybox没有正确加载内容

我的代码是在这里:

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

而且我思念的东西在的fancybox,我还没有看到在Chrome和点击的fancybox的右上角的关闭跨fancybox上的任何地方都会关闭fancybox,但情况并非如此。

+2

你似乎并不能够直接包含的fancybox CSS从他们的服务器(当然http://www.fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css给了我一个403禁止。)你是否也在你的实际代码中这样做,或只是在jsFiddle? –

+0

另外,你究竟如何尝试使用Fancybox?也许我很密集,但是我看到的只是当你点击元素时将新的DIV投射到文档中。我看不到将内容连接到Fancybox的任何内容?我在Fancybox文档中看不到任何东西,这表明你可以做到这一点,并有任何工作... –

+0

我只需要使用叠加效果,所以我用fancybox给它一个镜头。如果不使用fancybox,是否有更好的方法来实现叠加效果? – Mike

回答

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