大家好,对jQuery 浅析居中弹出层的实现方法感兴趣的小伙伴,下面一起跟随三零脚本的小编来看看jQuery 浅析居中弹出层的实现方法的例子吧。
css部分
/**
* @param
* @arrange (三零脚本) www.q3060.com
**/
/*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%}
/**
* @param
* @arrange (三零脚本) www.q3060.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);