<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. 关于使用NotificationComat导致android2.3及以下版本无法显示自定义布局的解决方法.

    大伙都知道 android-support-v4为我们提供了很多兼容的解决方案, 其中就有关于通知栏的. NotificationCompat, 顺利成章操刀显示通知. eg: Intent inte ...

  2. 浅谈C/C++中的static和extern关键字 转

    原文:http://developer.51cto.com/art/201104/256820.htm static是C++中常用的修饰符,它被用来控制变量的存贮方式和可见性.extern, &quo ...

  3. CollatingOfData 之 JsonHelper

    1 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System. ...

  4. IIS 之 添加绑定域名 或 设置输入IP直接访问网站

    1.打开IIS,右键站点 → 编辑绑定,弹出“网站绑定”窗口,如下图:   2.点击“添加”,弹出“添加网站绑定”窗口,如下图:   注意:若想输入 IP 地址直接访问,则可以有以下两种设置任一均可: ...

  5. 基于PHP的对接电子面单接口平台案例

    电子面单接口目前有三种对接方式,快递电子面单接口.菜鸟电子面单接口和快递鸟电子面单接口.这三种接口各有特点. 一.电子面单接口定义 1. 快递电子面单接口:快递公司自己开发的电子面单服务, 商家使用必 ...

  6. linux进程间通信概述

    一个大型的应用系统,往往需要众多进程协作,进程间通信的重要性显而易见. 进程间通信有如下一些目的: 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几兆字节之间. 共享数据: ...

  7. 【转】Nginx模块开发入门

    转自: http://kb.cnblogs.com/page/98352/ 结论:对Nginx模块开发入门做了一个helloworld的示例,简单易懂.也有一定的深度.值得一看. Nginx模块开发入 ...

  8. mac下的常用操作

    打开 应用程序(command+shift+A)-实用工具-终端 open .    直接打开Macintosh系统目录 其他口令(与linux一样)ls                显示当前目录内 ...

  9. MakeFile 文件详解

    GNU的make工作时的执行步骤入下:(想来其它的make也是类似)      1.读入所有的Makefile.      2.读入被include的其它Makefile.      3.初始化文件中 ...

  10. 【hdu2896】病毒侵袭

    题目描述 当太阳的光辉逐渐被月亮遮蔽,世界失去了光明,大地迎来最黑暗的时刻....在这样的时刻,人们却异常兴奋--我们能在有生之年看到500年一遇的世界奇观,那是多么幸福的事儿啊~~但网路上总有那么些 ...