JQUERY 居中弹出层的简单示例

前端之家收集整理的这篇文章主要介绍了JQUERY 居中弹出层的简单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
css部分

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

猜你在找的jQuery相关文章