jQuery弹出层

弹出层往往需要设置浮动样式position:absolute;

考虑到有一种情况,如：

移动到某一个元素上在其下方或者上方显示一个浮动层，作为提示语句，当鼠标移开该元素或者元素的提示层的时候需要隐藏该层，此时可以考虑在该元素外新增一个div或者其它元素，然后将新增的浮动层的html代码通过js加入到新增的div层容器中，此时就只需要考虑当移除该div层的时候才隐藏该层了。

但是此时要考虑该元素的位置显示问题，因为position:absolute;是相对于与它最相近的position:absolute;的父元素而言。所以设置位置的时候要减去父元素的相对位置。

//获取当前节点的父节点的position=absolute的对象
getParent:function(obj){
	var result = $("body"), //默认为body
		parents = obj.parents(); 
	for(var i=0,maxLen=parents.length;i<maxLen;i++){
		var pos = $(parents[i]).css("position");
		if(pos == "absolute"){
			result = $(parents[i]);
			break;
		}
	}
	return result;
}

例子:

当点击查看简介的时候显示对应的简介。考虑到最下面的查看简介可能会超出右侧边框的范围，这时会将div层显示在查看简介的上半部，且箭头变为向下显示。

对应js代码：

/**
 * 描述:查看简介
 * @author:xuzengqiang
 * @since:2014-12-12 11:47:16
 */
(function(window){
	var target,
		father,
		body,
		showTimer;
	/**
	 * selector:要显示的对象,fatherElement:父容器,不能超过该元素的范围(不考虑范围的影响的时候可以设置为null),
	 * content:详情内容,timer:下拉显示所需时间
	 */
	LookDetail = function(selector,fatherElement,content,timer){
		return new LookDetail.fn.init(selector,fatherElement,content,timer);
	};
	window.LookDetail = LookDetail;
	LookDetail.fn = LookDetail.prototype = {
		//显示详情
		showDetail:function(){
			if(target.parent().find(".coruAll").length==1){
				this.closeDetail();
				return false;
			}
			this.closeDetail();
			target.parent().append(this.contentHTML(body));
			$detail=$(".coruAll");
			$detail.css({"display":"none","z-index":"99"});
			this.setLocation();
			target.removeClass("on");
			if(!$detail.is(".animated")) {
				$detail.stop(false,true).slideDown(0);
			}
		},
		//关闭详情(直接删除这个元素)
		closeDetail:function(){
			$(".cour_tatel").addClass("on");
			$(".coruAll").remove().empty();
		},
		//获取详情内容
		contentHTML:function(content){
			return "<div class='coruAll'>"+
						"<div class='course_icon'></div>"+
						"<div class='cour_sharp bor_cour'>"+
							"<b class='bb1'></b><b class='bb2'></b><b class='bb3'></b><b class='bb4'></b>" +
							"<div class='course_content'>"+content+"</div>"+
							"<b class='bb5'></b><b class='bb6'></b><b class='bb7'></b><b class='bb8'></b>"+
						"</div>"+
					"</div>";		
		},
		//获取容器显示位置的距离上边距的长度
		getTop:function(){
			var maxHeight = $(window).height(),
				$detail = $(".coruAll"),
				parentY = this.getParent($detail).offset().top,
				locationY = target.offset().top+target.height()+2; //本来应该显示的位置
			if(father != null) {
				maxHeight = father.height()+father.offset().top-20; //-20是为了有了间隔
			}
			$(".course_icon").removeClass("on");
			if(locationY + $(".coruAll").height() > maxHeight) { //如果原本出现的位置加上当前的容器的高度>父容器的高度,则向上显示
				locationY = target.offset().top - $(".coruAll").height() - 8;
				$(".course_icon").addClass("on");
			}
			return locationY;
		},
		//获取容器显示位置的距离左边距的长度
		getLeft:function(){
			var $detail=$(".coruAll"),
				parentX = this.getParent($detail).offset().left,
				//默认水平居中
				locationX = $(window).width()/2 - $detail.width()/2; 
			if(father != null) { //否则居中在参照父容器内
				locationX = father.offset().left + (father.width()/2 - $detail.width()/2); 
			}
			return locationX;
		},
		//设置内容弹出层显示位置,当修改浏览器大小的时候需要该方法调用
		setLocation:function(){
			var $icon=$(".course_icon"),
				$detail=$(".coruAll"),
				parent=this.getParent($detail);
			$detail.css({
				//要减去父容器的左边距和上边距
				"left":(this.getLeft()-parent.offset().left)+"px",
				"top":(this.getTop()-parent.offset().top)+"px"
			});
			var iconX = target.offset().left+target.width()/2-this.getLeft();
			$icon.css({"left":iconX+"px"});
		},
		//获取当前节点的父节点的position=absolute的对象
		getParent:function(obj){
			var result = $("body"), //默认为body
				parents = obj.parents(); 
			for(var i=0,maxLen=parents.length;i<maxLen;i++){
				var pos = $(parents[i]).css("position");
				if(pos == "absolute"){
					result = $(parents[i]);
					break;
				}
			}
			return result;
		}
	};
	//原型继承
	var init = LookDetail.fn.init = function(selector,fatherElement,content,timer) {
		target = selector;
		father = fatherElement;
		body = content;
		if(timer!=null && timer >0){
			showTimer = timer;
		} else {
			showTimer = 1000;
		}
		return this;
	}
	init.prototype = LookDetail.prototype;
})(window);

调用:

$(".cour_tatel").click(function(){
	LookDetail($(this),$("#right_content"),$(this).parent().find(".hidden_content").val(),500).showDetail();
});