`

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

分享到:
评论

相关推荐

    javascript 弹出窗口

    在给定的标题“javascript 弹出窗口”和描述“推荐一个非常好用的javascript弹出窗口控件”中,我们可以推测这是一个关于使用JavaScript实现弹出窗口的控件库。下面我们将深入探讨JavaScript弹出窗口的相关知识点。 ...

    jQuery仿百度弹出式登录窗口

    本文将深入探讨如何使用jQuery技术来实现一个仿百度风格的弹出式登录窗口,帮助开发者创建更优美的用户体验。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作等任务。...

    PopMenu弹出式窗口

    PopMenu弹出式窗口在计算机编程中是一种常见的用户界面元素,它通常用于提供额外的选项或功能,当用户与主菜单、按钮或其他交互元素交互时出现。这种设计使得用户能够快速访问更多的操作,而不必占据屏幕上的固定...

    9种js弹出动态窗口的 php代码

    - `$.fn.alert()`, `$.fn.confirm()`, `$.fn.prompt()`:这些是jQuery模拟原生JavaScript弹出对话框的方式,增强了样式和交互性。 4. **动态加载内容**:使用Ajax技术,可以在不刷新整个页面的情况下,动态地向弹...

    asp.net中如何用c#实现弹出式的交互对话窗口

    本文介绍了如何在ASP.NET Web Forms应用中使用C#和JavaScript创建一个简单的弹出式交互对话窗口。通过实际案例演示了从项目创建到代码编写再到功能测试的全过程。希望这些内容能够帮助开发者们更好地理解和掌握相关...

    jquery实现弹出登录窗口

    "jquery实现弹出登录窗口"这个主题,主要涉及如何利用jQuery创建一个交互式的弹出登录窗口,增强用户体验。下面将详细介绍实现这一功能的关键步骤和相关知识点。 首先,我们需要理解jQuery的基本用法。jQuery通过...

    一个类似QQ的用JavaScript实现的在网页右下角弹出窗口源码例子

    在网页设计和开发中,有时候我们需要创建类似即时通讯软件如QQ那样的交互式功能,例如在网页右下角弹出通知或对话窗口。这个压缩包提供了一些JavaScript代码示例,可以帮助我们实现这样的效果。以下是这些文件及其...

    JavaScript实现弹出子窗口并传值给父窗口

    在JavaScript中,弹出子窗口并传递值给父窗口是一个常见的需求,特别是在构建交互式的Web应用时。这个过程可以通过使用`window.open()`或`window.showModalDialog()`函数来实现。让我们详细了解一下这两个方法以及...

    javascript div弹出窗口 可封装为JS类

    在JavaScript编程中,"div弹出窗口"是一种常见的交互式设计,它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术常被用于显示警告、提示、对话框或者加载内容丰富的模块,如图片画廊、表单等。在本...

    Div可拖动窗口,弹出提示消息窗口

    在这个“Div可拖动窗口,弹出提示消息窗口”的项目中,我们主要关注的是如何利用JavaScript来实现两个关键功能:一是使Div元素具备拖动和大小调整的能力,二是创建一个弹出的提示消息窗口,其效果类似于QQ的屏幕右下...

    功能强大的JS弹出窗口

    标题中的“功能强大的JS弹出窗口”指的是利用JavaScript实现的各种弹出对话框功能,这些对话框能够增强用户体验,提供丰富的交互方式。 在描述中提到的弹出窗口js代码,它提供了多种弹出效果,让我们一一解析: 1....

    非常实用的弹出tip提示窗口实例

    在IT领域,弹出提示窗口(Tip提示窗口)是一种常见的用户界面设计元素,它用于向用户提供即时信息或反馈。在本实例中,我们将深入探讨如何创建一个实用且高效的弹出tip提示窗口,以及相关的编程技术和设计原则。 ...

    ASP.NET类似MSN弹出提示窗口

    MSN,全称Microsoft Network,是微软的一个在线服务,其早期的即时通讯软件MSN Messenger就以这种弹出式对话框作为特征之一。 在标题中提到的"ASP.NET类似MSN弹出提示窗口",我们可以理解为开发者希望通过ASP.NET...

    制作Javascript弹出窗口技巧九则

    ### 制作Javascript弹出窗口技巧九则 在日常浏览网页的过程中,我们经常会遇到各种弹出窗口,这些窗口用于展示一些重要信息,如注意事项、版权信息等。通过使用简单的HTML结合Javascript技术,我们可以轻松实现这样...

    诚优仿关机效果弹出式登录窗口(Asp.Net+Ajax+access)

    【标题】"诚优仿关机效果弹出式登录窗口(Asp.Net+Ajax+access)"涉及了几个关键的技术领域,主要包括Asp.Net、Ajax以及Access数据库。这是一套实现特定用户交互效果的Web应用程序,下面将详细阐述这些技术及其在项目...

    自定义弹出窗口

    2. CSS 样式:为了使弹出窗口看起来独特且符合设计要求,我们需要用CSS来定制其外观。这包括设置弹出窗口的位置(相对于屏幕或某个元素)、尺寸、颜色、边框、阴影等。同时,CSS还用于添加过渡效果,如淡入淡出,以...

    仿关机效果弹出式登录窗口

    【标题】:“仿关机效果弹出式登录窗口”是一个基于Asp.Net技术和Ajax实现的登录界面设计。这种登录窗口在用户尝试访问受保护的页面时会以类似于系统关机提示的方式弹出,增强了用户体验,同时也增加了网站的安全性...

    弹出式DIV(依赖jquery)

    在网页设计中,弹出式窗口是一种常见的交互元素,它可以在用户进行特定操作时显示额外的信息或功能。这里我们关注的是一个基于jQuery实现的弹出式DIV。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...

    基于Jquery的Javascript弹出窗口

    【基于Jquery的Javascript弹出窗口】是一种在网页中实现交互式信息提示的技术,它能够以更为优雅的方式替代传统的浏览器alert、confirm和prompt对话框。Jquery是一个强大的JavaScript库,它简化了DOM操作,事件处理...

    JavaScript写的一个自定义弹出式对话框代码

    在这篇文章中,作者介绍了一个用JavaScript编写的自定义弹出式对话框的代码实现。此对话框的实现,涉及到了JavaScript中的DOM操作、事件处理、以及CSS样式的控制等多方面知识点。下面,我们将详细探讨这些知识点。 ...

Global site tag (gtag.js) - Google Analytics