<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的更多相关文章

  1. 三言两语之js事件、事件流以及target、currentTarget、this那些事

    厉害了我的哥--你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...

  2. js的event.srcElement与event.target(触发事件对象)

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  3. 在js自定义函数中使用$(event.target)代替$(this)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. js事件、事件流以及target、currentTarget、this那些事

    你是如此简单我却将你给遗忘   前面面试被问到js的事件机制  target.currentTarget.碰巧今天有时间来拔一拔,顺便记下.

  5. JS基础篇--JS的event.srcElement与event.target(触发事件对象)

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  6. JS的Event各种属性级target/currentTarget/relatedTarget各种目录的解释

    1.Event属性解释:https://developer.mozilla.org/zh-CN/docs/Web/API/Event 2.Event.target/currentTarget/rela ...

  7. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  8. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. js实现侧边栏信息展示效果

    目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...

随机推荐

  1. C++编译器默默编写并调用哪些函数

    什么时候empty class(空类)不再是个empty class呢?当C++处理过它之后,是的,如果你自己没有声明,编译器就会为它声明(编译器版本)一个copy构造函数.一个copy assign ...

  2. mysql重连,连接丢失:The last packet successfully received from the server--转载

    原文地址:http://nkcoder.github.io/blog/20140712/mysql-reconnect-packet-lost/ 1.1 错误信息: Caused by: com.my ...

  3. hive-安装0.13.1(hadoop2.2.0)

    hadoop2.2.0 hive0.13.1 (事先已经安装好hadoop.MySQL以及在MySQL中建好了hive专用账号,数据创建不创建都可以) 1.下载解压 2.把MySQL驱动加入hive的 ...

  4. 深入理解windows

    阿猫翻译的,用作备忘 深入理解windows——session.window stations.desktops 翻译自:http://www.brianbondy.com/blog/id/100/ ...

  5. 对x264_macroblock_cache_load的理解

    X264版本: 2004/06/03 函数作用: 将编码该宏块所需的信息加载到mb.pic.mb.cache两个结构体中,记录相邻宏块的存在性. 函数过程: 初始化坐标信息,这些坐标信息将在下面用作下 ...

  6. jquery ajax 后台和前台数据交互 C#

    <input type="button" id="updateInfo" value="更改货载重量" /> <div i ...

  7. javaweb学习总结十五(web开发的相关概念以及常用服务器介绍)

    一:java web开发的相关概念 1:web分为静态web和动态web 2:模拟web服务器 web页面如果想让外部网络访问,必须通过网络程序读取资源,流程: a:用户通过浏览器访问网络程序 b:网 ...

  8. [转].NET进阶系列之一:C#正则表达式整理备忘

    本文转自:http://www.cnblogs.com/KissKnife/archive/2008/03/23/1118423.html 有一段时间,正则表达式学习很火热很潮流,当时在CSDN一天就 ...

  9. MicrosoftActiveSync 安装

    如何将自己的程序放到开发板中呢,一般都有三种方法:U盘.SD卡.USB同步,前两者其实差不多,很方便快捷,而笔者在进行USB同步的时候,还是发现了一些问题,下面我来介绍一下USB同步方法的相关知识. ...

  10. JS的第一节课

    javascript中有两个非常重要的数据类型是对象和数组. e.g: var book={ topic:"javascript", fat:true };