Purgatory: window. createpopup () pop-up prompt tips
The CCBs System adds new requirements and adds information prompts to the text input box and select drop-down box on the interface.
It is not difficult to implement the text input box: Reload the onmouseover event of the text box, and then display the title of the text box.
However, the Select Control is far from that simple. First, select itself does not have the title attribute! This makes implementation more difficult.
After finding some information on the Internet, I found that the window. createpopup () function can achieve the pop-up tips, and Microsoft's technical support website also has this example (see: http://msdn.microsoft.com/workshop/samples/author/dhtml/popup/usingpopup.htm ). But it is not so smooth.
First, you must manually specify the position (X, Y coordinates), width, and height of the window generated by window. createpopup. The displayed content is changed. The displayed string is long or short, and the window length and width also need to change. How can this problem be achieved?
Secondly, the title attribute on Windows Web pages never wrap the line when displaying the prompt information, even if the information you display exceeds the display range of the screen, it will not worry about your feelings. Windows standards are our standards, and we can only follow them.
The two questions mentioned above have really puzzled me for a while. It should be said that it would be an afternoon. However, the final problem is still solved, although the process is somewhat broken.
The first solution is to specify the position, width, and height of the pop-up window. The location of the window is the location of the response to the mouse event, but the location must be clearly distinguished. Parameters of the following locations are as follows: clientx, clienty; offsetx, offsety, screenx, screeny, X, y. (The meaning of each position is explained in a separate article) Here it should be relative to the position of the Response Control, using the offsetx and offsety values.
To control the width and height of the window generated by createpopuo (), you must first call opopup. show (, width, height) method, get the scrollwidth and scrollheight of the form, and then hide the form: opopup. hide (). After obtaining the specific width and height, the real prompt information is displayed at the specific position:
Opopup. Show (X, Y, scrollwidth, scrollheight ). That is to say, call a display method to obtain the actual width and height before the tips is actually displayed! This is the key to solving the problem !!!
It is difficult to solve the problem of keeping the information displayed without line breaks. It is important to think of this method: use the table's TD attribute that does not allow line breaks: nowrap, the content contained in TD will be displayed all the time and will never wrap !!!
The sample code is as follows:
VaR winpopup = Window. createpopup (); // create the window to popup
VaR winstr = "<Table Style =/" border: 1 solid # ffa6ca/"border =/" 0/"width =/" 100%/"Height =/" 100%/"cellpadding =/" 0/"cellspacing =/" 0/ "background =/"/"> ";
Winstr + = "<tr> <TD align =/" center/"> <Table width =/" 100%/"Height =/" 100%/"border =/" 0 /" cellpadding =/"0/" cellspacing =/"0/"> ";
Winstr + = "<tr> <TD nowrap id =/" tdmsg/"valign =/" center/"style =/" font-size: 12px; color: red; face: tahoma/"> </TD> </tr> </table> ";
Winpopup.doc ument. Body. innerhtml = winstr;
VaR eventelement = NULL;
VaR xpos = 0;
VaR ypos = 0;
VaR timer = NULL;
/*************************************** **********************************
Function Name: showpopuphelp
Description: popup a window that shows the content of text or select
Input parameter: None
Output: None
Return: None
**************************************** *******************************/
Function showpopuphelp (helpmsg)
{
Initpopupwindow (helpmsg );
Eventelement = event. srcelement;
Xpos = Window. event. offsetx;
Ypos = Window. event. offsety;
Timer = setTimeout ("showpopupwindow ()", 1000 );
}
/*************************************** **********************************
Function Name: hidepopuphelp
Description: invisible the popup window
Input parameter: None
Output: None
Return: None
**************************************** *******************************/
Function hidepopuphelp ()
{
Cleartimeout (timer );
Winpopup. Hide ();
}
/*************************************** **********************************
Function Name: initpopupwindow
Description: initilize the popup window, draw the frame
Input parameter: string to show
Output: None
Return: None
**************************************** *******************************/
Function initpopupwindow (msgstr)
{
Winpopup.doc ument. All ('tdmsg '). innertext = msgstr;
}
/*************************************** **********************************
Function Name: showpopupwindow
Description: visible the popup window
Input parameter: None
Output: None
Return: None
**************************************** *******************************/
Function showpopupwindow ()
{
Winpopup. Show (0, 0, 10, 10 );
VaR H = winpopup.doc ument. Body. scrollheight;
VaR W = winpopup.doc ument. Body. scrollwidth;
Winpopup. Hide ();
// Var W = eventelement. offsetwidth;
// Var H = winpopup.doc ument. Body. scrollheight;
// Var x = eventelement. style. Left;
// Var y = eventelement. style. Top + eventelement. offsetheight;
VaR x = xpos + 3;
Var y = ypos + 3;
Winpopup. Show (X, Y, W, H, eventelement );
Delete eventelement;
}