Js popup position which right under target item
<div style="margin-left:600px;">
<div id="Span1" style="color:#eeeeff;background-color:#aaeeaa">left out panel</div> <div id="div1" style="z-index:500;position:absolute;display:none;color:#ffffff;background-color:#000000">
This is right Div.</br>
This is right Div.</br>
This is right Div.</br>
This is right Div.</br>
This is right Div.</br>
This is right Div.</br>
This is right Div.</br>
</div>
</div> <div style="margin-left:100px;">
<span id="txt" style="color:#eeeeff;background-color:#aaeeaa">abc</span> <div id="divPop" style="z-index:500;position:absolute;display:none;color:#ffffff;background-color:#000000">
Hello World! This is Popup Div.</br>
Hello World! This is Popup Div.</br>
Hello World! This is Popup Div.</br>
Hello World! This is Popup Div.</br>
Hello World! This is Popup Div.</br>
</div>
</div>
jQuery.fn.popupDivBottom = function (divToPop) {
var pos=$(this).position();
var height = $(this).height();
$(this).click(function (e) {
$(divToPop).css({
left: pos.left + "px",
top: (pos.top + height) + "px"
//top: ($(this).offset().top ) + "px"
});
if ($(divToPop).css('display') !== 'none') {
$(divToPop).hide();
}
else {
$(divToPop).show();
}
});
};
jQuery.fn.popupDivLeft = function (divToLeft) {
var pos = $(this).position();
var width = $(divToLeft).width();
var height = $(this).height();
$(this).click(function (e) {
$(divToLeft).css({
left: ($(this).offset().left - width) + "px",
top: ($(this).offset().top + 10) + "px"
//top: ($(this).offset().top ) + "px"
});
if ($(divToLeft).css('display') !== 'none') {
$(divToLeft).hide();
}
else {
$(divToLeft).show();
}
});
};
$(document).ready(function() {
$("#txt").popupDivBottom("#divPop");
$("#Span1").popupDivLeft("#div1");
});
Js popup position which right under target item的更多相关文章
- 三言两语之js事件、事件流以及target、currentTarget、this那些事
厉害了我的哥--你是如此简单我却将你给遗忘 放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...
- js的event.srcElement与event.target(触发事件对象)
IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...
- 在js自定义函数中使用$(event.target)代替$(this)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js事件、事件流以及target、currentTarget、this那些事
你是如此简单我却将你给遗忘 前面面试被问到js的事件机制 target.currentTarget.碰巧今天有时间来拔一拔,顺便记下.
- JS基础篇--JS的event.srcElement与event.target(触发事件对象)
IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...
- JS的Event各种属性级target/currentTarget/relatedTarget各种目录的解释
1.Event属性解释:https://developer.mozilla.org/zh-CN/docs/Web/API/Event 2.Event.target/currentTarget/rela ...
- JS框架_(Popup.js)3D对话框窗口插件
百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- js实现侧边栏信息展示效果
目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...
随机推荐
- iOS strong 和weak的形象理解
转自:http://hi.baidu.com/phone_lwc/item/c36e5bfe1cf9c313ce9f32be 觉得讲的很容易理解 The difference is that an o ...
- SMI接口,SMI帧结构,MDC/MDIO
转载:http://blog.csdn.net/zyboy2000/article/details/7442464 SMI全称是串行管理接口(Serial Management Interface). ...
- aptana中删除空行
问题:有一个css文件,写一行样式后,会换行,空一行,再写另一个样式.现在需要把空的一行给去掉. 尝试直接复制空行,但是aptana会把所有的换行都去了,变成了一个文件只有一行.尝试用正则,\r\t\ ...
- 前端必会css整理
1.设置css样式的三种方式? 外部样式表,引入一个外部css文件 内部样式表,将css代码放在<head>标签内部 内联样式,将css样式 ...
- CSS完成三角形
通过设置div的border属性,来实现! 将div的height和width属性分别设置为0px,将4边的border值设置为一样的宽度,通过调节边框的颜色课看到效果. <style> ...
- C#加密算法汇总(转载)http://www.cnblogs.com/zengxiangzhan/archive/2010/01/30/1659687.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 方法一: //须添加对System.Web的引用 ...
- CAML query for Group by count and data
CAML query for Group by count and data Company Category Product Name Microsoft Developer Visual Stud ...
- android-ramdisk.img分析、recovery.img&boot.img执行过程
转载请注明来源:cuixiaolei的技术博客 一.ramdisk介绍 ramdisk通过直面意思就大概能理解意思,ram disk虚拟内存盘,将ram模拟成硬盘来使用的文件系统.对于传统的磁盘文件系 ...
- IIS 发布网站到外网
前段时间做了一个项目在局域网中测试后要发布到外网上,一时间不知怎么搞,以为直接在IIS中修改发布时的IP就可以了,但是不可行,经过摸索终于成功发布到外网,下面是具体步骤. 前期准备:公网IP,掩码,网 ...
- 纯CSS制作“跳动的心”demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...