The cursor position pops up the DIV

Today, when I helped my colleagues call the page script, I encountered a div that should be popped up by clicking the mouse. To be honest, I do not know much about the control of the pop-up layer, but now that I agree, I still need to solve the problem. No way, you can only stick to your head. First, I learned about the principle of the pop-up layer. I used to use a ready-made layer, but I never thought about it. Now I think it's interesting to find it.

If you don't talk much about it, first code it up. Please advise if there is anything wrong with it.

 

/// <Summary>
/// Display the pop-up layer at the cursor position
/// </Summary>
/// <Param name = "c_id"> click the Object ID </param>
/// <Param name = "d_id"> pop-up layer Object ID </param>
Function d_show (c_id, d_id ){
// D_top: Top attribute of the pop-up layer (unit: Px) d_left: Left attribute of the pop-up layer (unit: Px) p_heiht: height of the current page p_width: width of the current page
// C_top: Click the top attribute of the object c_left: Click the left attribute of the object c_heigth: Click the height of the object c_width: the width of the clicked object
// C_obj: mouse click object d_obj: pop-up layer object d_height: pop-up layer object height d_width: pop-up layer object 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;

// Click the object
C_obj = $ ("#" + c_id );
// The pop-up layer object to be displayed
D_obj = $ ("#" + d_id );

// Obtain the height of the pop-up layer
D_height = d_obj.height ();
// Obtain the pop-up Layer Width
D_width = d_obj.width ();

// Get the height of the clicked object
C_heigth = c_obj.height ();
// Get the width of the clicked object
C_width = c_obj.width ();

// Get the current page height
P_heiht = pageheight ();
// Obtain the current page width
P_width = pagewidth ();

VaR offset = c_obj.offset ();
// Get the top attribute of the mouse click object
C_top = offset. Top;
// Obtain the left attribute of the clicked object
C_left = offset. Left;

// Calculate the top attribute value of the pop-up layer
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 ";

// Calculate the left attribute value of the pop-up layer
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>
/// Hide the pop-up layer
/// </Summary>
/// <Param name = "d_id"> pop-up layer id </param>
Function d_clost (d_id ){
$ ("#" Export d_id).css ("display", "NONE ");
}

// Returns the current webpage height
Function pageheight (){
If ($. browser. MSIE ){
Return document. compatmode = "css1compat "? Document.doc umentelement. scrollheight:
Document. Body. clientheight;
}
Else {
Return self. innerheight;
}
};

// Return the current webpage width
Function pagewidth (){
If ($. browser. MSIE ){
Return document. compatmode = "css1compat "? Document.doc umentelement. scrollwidth:
Document. Body. clientwidth;
}
Else {
Return self. innerwidth;
}
};

// Return the current browser height
Function browserheight (){
If ($. browser. MSIE ){
Return document. compatmode = "css1compat "? Document.doc umentelement. clientheight:
Document. Body. clientheight;
}
Else {
Return self. innerheight;
}
};

// Return the current browser width
Function browserwidth (){
If ($. browser. MSIE ){
Return document. compatmode = "css1compat "? Document.doc umentelement. clientwidth:
Document. Body. clientwidth;
}
Else {
Return self. innerwidth;
}
};