所以我将一个 div 附加到 body 上,这个 div 实际上会在点击图像 a
标签时弹出。为了实现 body 叠加效果,我使用的是fancybox。但是我可以将 div 附加到 body,但是这个 div 不会作为花式框加载。有人可以帮忙吗:
我的代码在这里:
http://jsfiddle.net/refhat/xap9F/60/
此外,我是否在 fancybox 中遗漏了一些东西,我也没有在 chrome 中看到 fancybox 右上角的关闭十字,并且在 fancybox 上的任意位置单击只会关闭 fancybox,这不应该是这种情况。
最佳答案
下面是一些您可以用来创建叠加层的代码:
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
});
关于javascript - fancybox 没有正确加载内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7383542/