用javascript实现弹出式提示窗口

最新推荐文章于 2024-04-13 16:25:52 发布

最新推荐文章于 2024-04-13 16:25:52 发布 · 550 阅读

文章标签：

#JavaScript #IE #Firefox #脚本 #.net #ViewUI

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在网页表单中实现帮助提示窗口的方法。通过一个兼容IE和Firefox浏览器的JavaScript脚本，可以在输入框后添加提示符，点击后显示帮助文本。文中提供了具体的实现代码。

当填写表单的时候，我们希望输入框的后面能有个提示符，点击以后弹出一个提示窗口，说明如何填写表单。我根据各种资料，完成了一个兼容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="#" 
 * onclick="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设置成相同，则连续点击的时候只会显示一个提示窗口。