下面是一些代码,你可以用它来创建一个覆盖:
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
});
你似乎并不能够直接包含的fancybox CSS从他们的服务器(当然http://www.fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css给了我一个403禁止。)你是否也在你的实际代码中这样做,或只是在jsFiddle? –
另外,你究竟如何尝试使用Fancybox?也许我很密集,但是我看到的只是当你点击元素时将新的DIV投射到文档中。我看不到将内容连接到Fancybox的任何内容?我在Fancybox文档中看不到任何东西,这表明你可以做到这一点,并有任何工作... –
我只需要使用叠加效果,所以我用fancybox给它一个镜头。如果不使用fancybox,是否有更好的方法来实现叠加效果? – Mike