滑鼠點擊位置彈出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;
    }
};