<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. 已知json类型根据类型封装集合

    1编写帮助类根绝url得到json public static string Post(string url) { string strURL = url; //创建一个HTTP请求 HttpWebR ...

  2. Hive中数据的加载和导出

    原文:http://blog.javachen.com/2014/06/09/hive-data-manipulation-language.html 关于 Hive DML 语法,你可以参考 apa ...

  3. Java_spring_定时执行任务

    > 版本说明 <dependencies> <dependency> <groupId>org.springframework</groupId> ...

  4. css 设置全屏背景图片

    <div id="div1"><img src="img.jpg" /></div> div#div1{ position: ...

  5. 利用正则表达式作为string.split seprator

    某字符串 var str = "{1,att,7},{2,break,7},{3,crit,7},{4,combo,7},{5,break,7},{6,hit,7}"; 需要分割成 ...

  6. 关于删除linux多余内核

    step 1: 查找当前正在使用的内核文件的版本号 #uname -r step 2: 列出所有的内核文件,使用rpm 或者 dpkg(基于linux系统) 命令  #rpm -q kernel 或者 ...

  7. 用const取代宏定义更好的管理内存

    用const取代宏定义更好的管理内存 宏:只是在预处理器里进行文本替换,没有类型,不做任何类型检查,编译器可以对相同的字符串进行优化.只保存一份到 .rodata 段.甚至有相同后缀的字符串也可以优化 ...

  8. CCScale9Sprite的使用

    #include "cocos-ext.h" USING_NS_CC_EXT; //框中需要显示的label CCLabelTTF *label = CCLableTTF::cre ...

  9. Android(java)学习笔记198:Android下的逐帧动画(Drawable Animation)

    1.帧动画: 帧动画顾名思义,一帧一帧播放的动画就是帧动画. 帧动画和我们小时候看的动画片的原理是一样的,在相同区域快速切换图片给人们呈现一种视觉的假象感觉像是在播放动画,其实不过是N张图片在一帧一帧 ...

  10. hdu 4325 树状数组+离散化

    思路:这题的思路很容易想到,把所有时间点离散化,然后按时间一步一步来,当到达时间i的时候处理所有在i处的查询. 这个代码怎一个挫字了得 #include<iostream> #includ ...