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();
});