JQuery中弹出层位置设置
来源:互联网 发布:机房网络布线方案 编辑:程序博客网 时间:2024/05/19 13:14
在JQuery中,经常会用到弹出层tooltip进行信息的显示,经常会在某个标签,例如<a>或者<span>上,当鼠标放上去时,将弹出层显示在此标签的下方或者当前鼠标指针的右下方。
这两种都首先需要将弹出框设置在页面的最前端。虽然页面表面上是平面的,但也存在谁覆盖谁的问题,要将隐藏的弹出框显示在当前的最前端,需设置
也就是将z轴的级别设置在最高的99
下面介绍这两种的实现方法。
第一种:举例:当鼠标经过时,在<a id="aaa">标签的下方显示弹出框。首先要取当前标签的坐标,是相对于整个document的坐标,通过得到的offset有两个属性,left和top,分别是当前标签的最左和最上的坐标。如果要将弹出窗口设置在当前标签的左下方,则使用当然,如果要相对于当前标签左上,偏移一定的距离,可以自己在css中加上想要的偏移量。
第二种:当鼠标经过<a>标签,让弹出窗显示在当前鼠标指针的右下方。此方法则需要在鼠标经过时触发的函数上添加event参数,例如,因为这样才能让浏览器监听到鼠标经过的这个event,首先定义一个事件之所以写这个,是因为IE和火狐对于时间监听的得到机制不一样,但以上这两种不同方式,一定能得到这个事件。然后就可以利用clientX和ClientY,来获取鼠标横纵坐标的位置了,然后添加css属性:将弹出框显示在鼠标右下方。
这两种都首先需要将弹出框设置在页面的最前端。虽然页面表面上是平面的,但也存在谁覆盖谁的问题,要将隐藏的弹出框显示在当前的最前端,需设置
- $("tooltip").css("z-index","99")
也就是将z轴的级别设置在最高的99
下面介绍这两种的实现方法。
第一种:举例:当鼠标经过时,在<a id="aaa">标签的下方显示弹出框。首先要取当前标签的坐标,是相对于整个document的坐标,通过
- var offset=$("#aaa").offset();
- $("#tooltip").css("left",offset.left+"px").css("top",offset.top+"px");
第二种:当鼠标经过<a>标签,让弹出窗显示在当前鼠标指针的右下方。此方法则需要在鼠标经过时触发的函数上添加event参数,例如
- $("#aaa").mouseover(function(event){XXXXX}
- var myEvent=event||window.event
- $("tooltip").css("left",myEvent.clientX+"px").css("top",myEvent.clientY+"px");
0 0
- JQuery中弹出层位置设置
- WP中弹出层学习
- Gridview中弹出层前台取值避免了刷新,easyui+Jquery
- 网页制作中弹出层的方法
- bootstrap中弹出层model的用法
- jquery中弹出下拉框并收回
- fancybox中弹出窗口的设置
- Android PopupWindow在7.0中弹出位置问题
- Android PopupWindow在7.0中弹出位置问题
- asp.net中弹出层效果(div,不可拖拉)
- Jquery EasyUI中弹出确认对话框 以及加载效果
- Jquery EasyUI中弹出确认对话框 以及加载效果
- 使用Jquery在JSP页面中弹出对话框
- Java中弹出对话框中的字体设置问题
- layer插件如何在弹出层中弹出一警告提示并关闭弹出层
- 网页中弹出窗口
- 从框架中弹出
- Swing中弹出对话框
- 转换到C样式数组
- BUPT Summer Journey #test8 D
- 免费天气预报接口API以及全国所有地区代码!!
- datasheet中不是很明白的英文句子
- Hadoop管理员的十个最佳实践
- JQuery中弹出层位置设置
- hduoj1084!【水题】
- informix数据库操作
- Metasploit数据库问题汇总
- js验证码
- 学英语尽量不要从背词汇表开始
- 【设计模式】桥接模式
- ios--检测用户截屏, 并获取所截图片
- BUPT Summer Journey #test8 E