JQuery中弹出层位置设置-白红宇

JQuery中弹出层位置设置

阅读量：2401 次

发布时间：2019-05-10

本文共 913 字，大约阅读时间需要 3 分钟。

在JQuery中，经常会用到弹出层tooltip进行信息的显示，经常会在某个标签，例如<a>或者<span>上，当鼠标放上去时，将弹出层显示在此标签的下方或者当前鼠标指针的右下方。

这两种都首先需要将弹出框设置在页面的最前端。虽然页面表面上是平面的，但也存在谁覆盖谁的问题，要将隐藏的弹出框显示在当前的最前端，需设置

      Java代码   
 $("tooltip").css("z-index","99")  

也就是将z轴的级别设置在最高的99

下面介绍这两种的实现方法。

第一种：举例：当鼠标经过时，在<a id="aaa">标签的下方显示弹出框。首先要取当前标签的坐标，是相对于整个document的坐标，通过

      Java代码   
 var offset=$("#aaa").offset();  

得到的offset有两个属性，left和top，分别是当前标签的最左和最上的坐标。如果要将弹出窗口设置在当前标签的左下方，则使用

      Java代码   
 $("#tooltip").css("left",offset.left+"px").css("top",offset.top+"px");  

当然，如果要相对于当前标签左上，偏移一定的距离，可以自己在css中加上想要的偏移量。

第二种：当鼠标经过<a>标签，让弹出窗显示在当前鼠标指针的右下方。此方法则需要在鼠标经过时触发的函数上添加event参数，例如

      Java代码   
 $("#aaa").mouseover(function(event){XXXXX}  

，因为这样才能让浏览器监听到鼠标经过的这个event，首先定义一个事件

      Java代码   
 var myEvent=event||window.event  

之所以写这个，是因为IE和火狐对于时间监听的得到机制不一样，但以上这两种不同方式，一定能得到这个事件。然后就可以利用clientX和ClientY，来获取鼠标横纵坐标的位置了，然后添加css属性：

      Java代码   
 $("tooltip").css("left",myEvent.clientX+"px").css("top",myEvent.clientY+"px");  

将弹出框显示在鼠标右下方。

转载地址：http://pipob.baihongyu.com/

你可能感兴趣的文章