弹出层往往需要设置浮动样式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();
});