鼠标点击位置弹出DIV

         今日帮同事调页面脚本的时候碰到了一个要在鼠标点击位置弹出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;
    }
};