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等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...
随机推荐
- 分布式文件系统之GPFS
GPFS是IBM公司通过完善和发展其Tiger Shark文件系统发展而来.GPFS通过共享磁盘结构来实现其强大的扩展性.一个GPFS系统由许多集群节点组成,GPFS文件系统和应用程序在上面运行.这些 ...
- python学习笔记概述
第一次接触python是因为一个项目需要做自动化测试,因为各种限制没有使用QTP,选择了开源的比较流行的selenium,但如果只是靠selenium进行录制脚本.修改脚本这个很多时候没办法满足需求, ...
- View绘制详解(五),draw方法细节详解之View的滚动/滑动问题
关于View绘制系列的文章已经完成了四篇了,前面四篇文章主要带小伙伴们熟悉一下View的体系的整体框架.View的测量以及布局等过程,从本篇博客开始,我们就来看看View的绘制过程.View的绘制涉及 ...
- Python中查找字符串方法的速度比较
- oracle 取随机数据
--取随机数据 select dbms_random.value from dual; ); --百分比
- Linux 内核简介
Linux内核简介 一.系统架构 (1). Linux系统架构 ##用户空间: 文件系统 C库 ##内核空间: 接口 内核 (2). Linux内核架构 二.Linux内核源代码 下载地址 www.k ...
- Linux 解压/压缩操作命令
.tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gun ...
- 基于ArcEngine与C#的鹰眼地图实现
鹰眼图是对全局地图的一种概略表达,具有与全局地图的空间参考和空间范围.为了更好起到空间提示和导航作用,有些还具备全局地图中重要地理要素,如主要河流.道路等的概略表达.通过两个axMapControl控 ...
- IIS 发布网站到外网
前段时间做了一个项目在局域网中测试后要发布到外网上,一时间不知怎么搞,以为直接在IIS中修改发布时的IP就可以了,但是不可行,经过摸索终于成功发布到外网,下面是具体步骤. 前期准备:公网IP,掩码,网 ...
- jquery的datepicker汉化
$("#date").datepicker({ dateFormat: "yy-mm-dd", monthNames:["1月", &quo ...