JQUERY 居中弹出层的简单示例

这篇文章主要为大家详细介绍了JQUERY 居中弹出层的简单示例，具有一定的参考价值，可以用来参考一下。

/**
 * @param 
 * @arrange (512.笔记) www.q1010.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 (512.笔记) www.q1010.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);

本文来自：http://www.q1010.com/180/2080-0.html

注：关于JQUERY 居中弹出层的简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：