这里只是放出了cssjs文件,在博客上做个记录而已,所以没有放出demo,感兴趣的自己看一下代码吧。


css部分

[css]/*ie6居中显示层的样式*/
.chagetop { left:expression(eval(document.documentElement.scrollLeft+ (document.documentElement.clientWidth-this.offsetWidth)/2));
top:expression(eval(document.documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)/2));z-index:9999999;
}
/*遮罩*/
.overlay { background:#000; cursor: pointer; display: block; filter:alpha(opacity=60); opacity: 0.6; height:100%; width:100%; position:absolute; left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop));
z-index:9999998;width:100%}
[/css]

js部分

[js]/*
* Plugin name – gLayers
* Version – v1.0
* Updated – 2012-11-20
* author – liuxiaofan
* author’s blog – http://liuxiaofan.com
* 参数说明:
* name为要弹出的层的id;
* overlay为遮罩,如果为0则不显示遮罩;
* position为定位方式,如果为0则不居中定位;
* 注意:为了兼容ie6请不要忘记引入glayes.css这个文件
*/
(function($) {
$.fn.gLayers = function(opts) {
var def = {
name: "#j-gl-bt",
overlay: 1,
position: 1
};
var opts = $.extend(def, opts),
target = opts.name,
ol = opts.overlay,
pst = opts.position;
return this.each(function(i) { /*添加遮罩*/
var isIE = $.browser.msie && !$.support.opacity,
isIE6 = isIE && $.browser.version < 7,
od = $(target),
itop = (document.documentElement.clientHeight – od.height()) / 2,
ileft = (document.documentElement.clientWidth – od.width()) / 2;
if(ol != 0) {
if(!$("#gl-Overlay").length > 0) {
if(!isIE6) {
$("body").append("<div id=’gl-Overlay’ style=’background:#000;cursor: pointer;display: block;filter:alpha(opacity=60);opacity: 0.6;height:100%;width:100%; position: fixed; left: 0;top: 0;z-index:9999998′></div>")
} else {
$("html").css({
"height": "100%"
});
$("body").css({
"height": "100%"
});
$("body").append("<div id=’gl-Overlay’ class=’overlay’><iframe frameborder=0 id=’frame1′ style=’filter:alpha(opacity=10);opacity: 0.6;height:100%;width:100%;’></iframe></div>")
}
}
}; /*添加遮罩 end*/
/* 实现弹出 */
if(pst != 0) {
$("#gl-Overlay").show();
if(!isIE6) {
od.css("top", itop).css("left", ileft).css("position", "fixed").css("z-index", "9999999").show();
} else {
od.css("position", "absolute").show();
od.addClass("chagetop");
}
}else{od.show()

} /*关闭按钮*/
$(".j-gl-c").click(function() {
$(target).hide();
$("#gl-Overlay").remove();
return false;
});
});
}
})(jQuery);[/js]

转载请注明来自:爱前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注