JQUERY 居中弹出层的简单示例

css部分

/**
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
/*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%}

js部分

/**
* @param 
* @arrange (编程之家) jb51.cc
* 参数说明：
* 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);

原文地址：https://www.jb51.cc/jquery/527449.html