当填写表单的时候,我们希望输入框的后面能有个提示符,点击以后弹出一个提示窗口,说明如何填写表单。我根据各种资料,完成了一个兼容IE/firefox的javascript脚本,可以向网页中任何元素添加帮助文本。代码如下:
/** * find a element's position * see http://blog.firetree.net/2005/07/04/javascript-find-position/ */ function findPosX(obj) { var curleft = 0; if(obj.offsetParent) while(1) { curleft += obj.offsetLeft; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.x) curleft += obj.x; return curleft; } function findPosY(obj) { var curtop = 0; if(obj.offsetParent) while(1) { curtop += obj.offsetTop; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.y) curtop += obj.y; return curtop; } /** * shot a popup window to show the helptext * obj: source object to show the help text. normally it's hyperlink * targetId: object id for the popup help text window * helpText: help text to be shown * * sample: * <a href="#" * οnclick="javascript:helpPopup(this, 'divPopup','help');return false;">help</a> * */ function helpPopup(obj, targetId, helpText) { var iX = findPosX(obj); var iY = findPosY(obj) + obj.offsetHeight + 5; var oPopupBody = document.getElementById(targetId); if (oPopupBody==null) { oPopupBody=document.createElement("div"); oPopupBody.id=targetId; oPopupBody.style.width="200"; oPopupBody.style.height="50"; oPopupBody.style.position="absolute"; document.body.appendChild(oPopupBody); } oPopupBody.style.top = iY; oPopupBody.style.left = iX; oPopupBody.style.padding = "0px"; oPopupBody.style.backgroundColor = "infobackground"; oPopupBody.style.color = "infotext"; oPopupBody.style.borderTop = "2px solid threedshadow"; oPopupBody.style.borderLeft = "2px solid threedshadow"; oPopupBody.style.borderBottom = "2px solid threeddarkshadow"; oPopupBody.style.borderRight = "2px solid threeddarkshadow"; oPopupBody.style.fontFamily = "Tahoma"; oPopupBody.style.fontSize = "12px"; oPopupBody.innerHTML = helpText; oPopupBody.onmouseover = function() { document.getElementById(targetId).style.display="none";return false;} oPopupBody.style.display=""; }
在实际使用的时候,如果有多个项需要弹出窗口,如果把id设置成相同,则连续点击的时候只会显示一个提示窗口。