用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="#" 
 * ο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设置成相同,则连续点击的时候只会显示一个提示窗口。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值