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等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...
随机推荐
- Computer Science Theory for the Information Age-3: 高维空间中的高斯分布和随机投影
高维空间中的高斯分布和随机投影 (一)在高维球体表面产生均匀分布点的方法 我们来考虑一个采样问题,就是怎样在高维单位球体的表面上均匀的采样.首先,考虑二维的情况,就是在球形的周长上采样.我们考虑如下方 ...
- liunx 文件相关
一.linux中 文件属性以 l.b.c.d.开头的都是什么文件? lrwxrwxrwx 1 root root 11 Aug 20 08:38 core -> /proc/kcoredrwxr ...
- i = i++;
在这里jvm里面有两个存储区,一个是暂存区(是一个堆栈,以下称为堆栈),另一个是变量区.语句istore_1是将堆栈中的值弹出存入相应的变量区(赋值):语句iload_1是将变量区中的值暂存如堆栈中. ...
- SpringMVC的简单示例
首先导入所需的jar包,项目目录结构如下: 之后需要配置一下web.xml文件,内容如下: <?xml version="1.0" encoding="UTF-8& ...
- cocos2d-x lua与c++简单交互
cocos2d-x lua与c++简单交互 version: cocos2d-x 3.6 本文讲述lua与c++的一些简单交互: lua通过消息方式调用c++无参接口 c++调用lua带参接口 1.通 ...
- Android(java)学习笔记82:我们到底该如何处理异常?
我们到底该如何处理异常? 原则: 如果该功能内部可以将问题处理,用try,自己能解决就自己解决问题. 如果处理不了,交由调用者处理,这是用throws,自己不能解决的问题,我们就抛出去交个调用者解决这 ...
- linux云计算集群架构学习笔记:rhel7基本命令操作
1-3-RHEL7基本命令操作 1.1Linux终端介绍 Shell提示符 Bash Shell基本语法. 1.2基本命令的使用:ls.pwd.cd. 1.3查看系统和BIOS硬件时间. 1.4 L ...
- vim 编辑器 打开GB2312、GBK文件乱码解决方法
安装好的操作系统一般都带有vim编辑器,但是默认不支持GB2312中文,打开文件出现乱码,解决办法如下. 1.打开以下文件 sudo vim /var/lib/locales/supported.d/ ...
- hdu 3473 裸的划分树
思路: 用Sum[dep][i]记录从tree[po].l到i中进入左子树的和. #include<iostream> #include<algorithm> #include ...
- saltstack实战2--远程执行之目标(target)
target 就是目标的意思,你要在那台机器上执行此命令或此状态.或者说将此动作或者状态文件推送给谁来执行,让那个minion执行可以进行一些匹配 对于拥有大量机器的环境,如果单独一台台的执行指定mi ...