`

JQuery中弹出层位置设置

阅读更多
   在JQuery中,经常会用到弹出层tooltip进行信息的显示,经常会在某个标签,例如<a>或者<span>上,当鼠标放上去时,将弹出层显示在此标签的下方或者当前鼠标指针的右下方。
   这两种都首先需要将弹出框设置在页面的最前端。虽然页面表面上是平面的,但也存在谁覆盖谁的问题,要将隐藏的弹出框显示在当前的最前端,需设置
$("tooltip").css("z-index","99")

也就是将z轴的级别设置在最高的99
下面介绍这两种的实现方法。
第一种:举例:当鼠标经过时,在<a id="aaa">标签的下方显示弹出框。首先要取当前标签的坐标,是相对于整个document的坐标,通过
var offset=$("#aaa").offset();
得到的offset有两个属性,left和top,分别是当前标签的最左和最上的坐标。如果要将弹出窗口设置在当前标签的左下方,则使用
$("#tooltip").css("left",offset.left+"px").css("top",offset.top+"px");
当然,如果要相对于当前标签左上,偏移一定的距离,可以自己在css中加上想要的偏移量。
第二种:当鼠标经过<a>标签,让弹出窗显示在当前鼠标指针的右下方。此方法则需要在鼠标经过时触发的函数上添加event参数,例如
$("#aaa").mouseover(function(event){XXXXX}
,因为这样才能让浏览器监听到鼠标经过的这个event,首先定义一个事件
var myEvent=event||window.event
之所以写这个,是因为IE和火狐对于时间监听的得到机制不一样,但以上这两种不同方式,一定能得到这个事件。然后就可以利用clientX和ClientY,来获取鼠标横纵坐标的位置了,然后添加css属性:
$("tooltip").css("left",myEvent.clientX+"px").css("top",myEvent.clientY+"px");
将弹出框显示在鼠标右下方。
分享到:
评论

相关推荐

    jQuery弹出层 可移动层 提示框 浮动层

    在标题提及的案例中,"jQuery弹出层 可移动层 提示框 浮动层",意味着我们需要创建一个不仅可以显示信息,还可以通过用户手势移动的浮动窗口。为了实现这一功能,我们需要结合jQuery的选择器、事件处理和动画方法。...

    jquery弹出层

    总之,jQuery弹出层是网页交互设计中不可或缺的一部分。掌握其原理和应用,不仅可以提升网站的用户体验,也是开发者技能树上的重要一环。通过不断实践和学习,我们可以灵活运用这些技术,创造出更多富有创意和实用性...

    jquery弹出层 jquery弹出层 jquery弹出层

    标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果,这在网页设计中是非常常见的一种功能,用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先,让我们理解什么是弹出层。弹...

    jquery弹出层特效

    描述中的"jquery弹出层代码,ajax异步获取页面,弹出层登录"揭示了实现这一特效的具体技术。在登录场景中,利用Ajax进行异步数据传输可以使得用户在不刷新整个页面的情况下,发送登录请求并接收响应。这样提高了用户...

    jQuery弹出层

    **jQuery弹出层详解** 在Web开发中,弹出层是一种常见的交互元素,用于显示临时信息、用户对话或进行操作确认。本篇文章将深入探讨如何使用jQuery实现弹出层功能,以及相关源码分析和应用工具。 首先,jQuery库...

    JQuery 弹出层,始终显示在屏幕正中间

    在 `letDivCenter()` 函数中,我们使用 JQuery 的 `offset()` 方法来获取窗口的高度和宽度,然后计算弹出层的位置,并使用 `css()` 方法来设置弹出层的位置和显示状态。 在 `showAll()` 函数中,我们调用 `showMask...

    漂亮的jquery 弹出层

    标题中的“漂亮的jquery 弹出层”指的是使用jQuery库实现的一种视觉效果良好的弹出窗口功能。在网页设计中,弹出层(也称为模态窗口或对话框)是一种常见的交互元素,用于显示额外的信息、提示用户操作或者进行表单...

    Jquery 图片弹出层框架

    3. **DOM操作**:jQuery库用于动态修改HTML结构,例如在页面上插入弹出层元素,并将目标图片加载到弹出层中。 4. **动画效果**:利用jQuery的动画功能,弹出层可以优雅地淡入/淡出,提供平滑的用户体验。 5. **...

    jquery弹出层插件

    今天我们将深入探讨一款名为“jQuery弹出层插件”的工具,这款插件以其便捷性与灵活性,广泛应用于移动和网页项目中。 一、jQuery插件基础 jQuery插件是jQuery库的一个扩展,它们通过添加新的功能来增强原生的...

    jquery弹出层框架方便简单

    《jQuery弹出层框架——便捷美观的dialogs实现》 在Web开发中,用户交互体验是至关重要的一个环节,其中弹出层(popup layer)作为常见的一种交互方式,被广泛应用于消息提示、表单填写、信息展示等场景。jQuery库...

    Jquery弹出层时尚特效10种

    【jQuery弹出层时尚特效10种】 在Web开发中,弹出层(Modal)是一种常用的交互元素,它能够在用户不离开当前页面的情况下显示额外的信息或功能。jQuery库以其强大的DOM操作和事件处理能力,为创建弹出层特效提供了...

    jQuery弹出层 可加载iframe 功能强大 简单易用

    在这个特定的案例中,标题和描述提到的“jQuery弹出层可加载iframe”指的是一个利用jQuery实现的弹出窗口,它能够嵌入一个iframe(内联框架)来展示外部网页或应用程序。 首先,我们需要理解jQuery是什么。jQuery是...

    jquery登录弹出层

    首先,我们要理解jQuery弹出层的基本原理。通常,弹出层是通过CSS定位和JavaScript控制显示与隐藏来实现的。在jQuery中,我们可以利用`.show()`和`.hide()`方法来控制元素的可见性,而`.fadeIn()`和`.fadeOut()`则...

    jquery 弹出层插件

    总的来说,jQuery弹出层插件是Web开发中的实用工具,它简化了弹出层的创建和管理,使得开发者能更专注于应用逻辑而不是基础的交互设计。无论是简单的提示信息还是复杂的对话框,jQuery弹出层插件都能提供灵活的解决...

    jquery弹出层不关闭 父页面刷新

    在IT领域,尤其是在Web开发中,"jquery弹出层不关闭 父页面刷新"是一个常见的交互需求。这里,我们主要讨论如何使用jQuery实现这样的功能,即在一个弹出层(通常是一个模态对话框)显示时,用户可以操作父页面而不会...

    jquery colorbox弹出层插件制作图片弹出显示代码

    例如,如果你想在一个弹出层中显示一段HTML,可以这样设置: ```html &lt;a class="example1" href="path/to/html.html"&gt;Open HTML Content&lt;/a&gt; ``` 在JavaScript中,你可以设置`iframe`选项为`true`: ```...

    jquery弹出层特效超炫

    《jQuery弹出层特效:打造超炫用户体验》 在网页设计和开发中,弹出层是一种常见的交互元素,用于展示信息、提示用户或进行交互操作。jQuery作为一个强大的JavaScript库,为实现这种效果提供了丰富的功能和便利。本...

    jquery dialog弹出层

    描述中提到的“基于jquery项目中用到的dialog弹出层”,意味着在实际的jQuery项目开发中,Dialog常被用于增强用户体验,提供额外的信息展示或者获取用户输入。它能够轻松地嵌入到现有的HTML结构中,通过调用jQuery...

    JQuery弹出层插件

    在前端开发中,jQuery弹出层插件是用于创建弹窗效果的重要工具,它能够帮助开发者轻松实现模态对话框、提示信息、加载提示等交互功能。本篇将详细介绍jQuery弹出层插件,以及如何使用名为"Popup Div"的实例。 首先...

    jquery 弹出层,点击链接弹出,不支持框架

    首先,让我们了解jQuery弹出层的基本概念。弹出层通常指的是在用户与页面交互时,如点击按钮或链接,会在当前页面上弹出一个浮动窗口,显示额外的信息或功能。这种效果可以用来展示详细信息、表单、图片等,而不会...

Global site tag (gtag.js) - Google Analytics