今日帮同事调页面脚本的时候碰到了一个要在鼠标点击位置弹出DIV,说实话,对于弹出层的控制上了解并不多,不过呢既然答应了还是要解决问题的。没办法了,只能硬着头皮上,先是了解了一下弹出层的原理,以前只是用现成的,却从来没去细想过研究,如今一琢磨,发现也挺有意思的。
废话不多说了,先把代码整上来,有什么不对的地方还是请大家指教。
/// <summary>
/// 光标位置显示弹出层
/// </summary>
/// <param name="C_id">鼠标点击对象ID</param>
/// <param name="D_id">弹出层对象ID</param>
function D_Show(C_id,D_id) {
//D_top : 弹出层的top属性(单位:px) D_left : 弹出层的left属性(单位:px) P_heiht : 当前网页的高度 P_width : 当前网页的宽度
//C_top : 鼠标点击对象的top属性 C_left : 鼠标点击对象的left属性 C_heigth : 鼠标点击对象的高度 C_width : 鼠标点击对象的宽度
//C_obj : 鼠标点击对象 D_obj :弹出层对象 D_height :弹出层对象高度 D_width :弹出层对象宽度
var D_top,D_left,P_heiht,P_width,C_top,C_left,C_heigth,C_width,C_obj,D_obj,D_height,D_width;
//鼠标点击对象
C_obj=$("#"+C_id);
//要显示的弹出层对象
D_obj=$("#"+D_id);
//取得弹出层高度
D_height=D_obj.height();
//取得弹出层宽度
D_width=D_obj.width();
//取得鼠标点击对象高度
C_heigth = C_obj.height();
//取得鼠标点击对象宽度
C_width = C_obj.width();
//取得当前页面高度
P_heiht = pageHeight();
//取得当前页面宽度
P_width = pageWidth();
var offset = C_obj.offset();
//取得鼠标点击对象top属性
C_top = offset.top;
//取得鼠标点击对象left属性
C_left = offset.left;
//计算弹出层的top属性值
if(P_heiht-(C_top+C_heigth+D_height)>=0) {
D_top=C_top+C_heigth;
}
else {
D_top = C_top-D_height;
}
D_top=D_top+"px";
//计算弹出层的left属性值
if(P_width-(C_left+D_width)>=0) {
D_left=C_left;
}
else {
if(D_width>=C_width) {
D_left=C_left-(D_width-C_width);
}
else {
D_left=C_left+C_width;
}
}
D_left=D_left+"px";
D_obj.css({top:D_top,left:D_left,position:"absolute",visibility:"visible",display:"block"});
};
/// <summary>
/// 隐藏弹出层
/// </summary>
/// <param name="D_id">弹出层ID</param>
function D_Clost(D_id){
$("#"+D_id).css("display","none");
}
//返回当前网页高度
function pageHeight() {
if($.browser.msie) {
return document.compatMode=="CSS1Compat"?document.documentElement.scrollHeight:
document.body.clientHeight;
}
else {
return self.innerHeight;
}
};
//返回当前网页宽度
function pageWidth() {
if($.browser.msie) {
return document.compatMode=="CSS1Compat"?document.documentElement.scrollWidth:
document.body.clientWidth;
}
else {
return self.innerWidth;
}
};
//返回当前浏览器高度
function browserHeight() {
if($.browser.msie) {
return document.compatMode=="CSS1Compat"?document.documentElement.clientHeight:
document.body.clientHeight;
}
else {
return self.innerHeight;
}
};
//返回当前浏览器宽度
function browserWidth() {
if($.browser.msie) {
return document.compatMode=="CSS1Compat"?document.documentElement.clientWidth:
document.body.clientWidth;
}
else {
return self.innerWidth;
}
};