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等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...
随机推荐
- Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 类
Ruby和其他面向对象的语言一样,使用类来组织方法,然后实例化类,创建对象.1.构造方法使用双引号是字符串的字面构造方法,也可以使用“具名构造方法”,即在类名上调用new方法 >> s=& ...
- 写了个SharedPreferences的工具类(带加密)
/* * Copyright (C) 2014 Jason Fang ( ijasonfang@gmail.com ) * * Licensed under the Apache License, V ...
- Vesions ignore & ld: library not found for -l...
1.递归删除指定目录下的 .git..svn 文件 find . -name .git | xargs rm -fr find . -name .svn | xargs rm -rf 第一条倒还不常用 ...
- 小白日记39:kali渗透测试之Web渗透-SQL手工注入(一)-检测方法
SQL手工注入(一) SQL注入:通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.[SQL注入原理] ##服务端程序将用户输入参数作为查询 ...
- Sorting It All Out
Description An ascending sorted sequence of distinct values is one in which some form of a less-than ...
- Direct3D11-1 初始化
在使用一个东西之前,我们需要初始化他,好比汽车加油,手机充电.于是我们采取平时的编码习惯,试图写下如下代码 Direct3D11 _direct3d11; 事实上,我们 ...
- 安装openshift客户端工具 rhc
安装ruby: $ sudo apt-get install ruby-full 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 将会安装下列额外的软件包: ...
- Android studio设置参数提示
在Android studio的使用的过程中,那么就需要对当前的代码显示当前的方式做一个的提示信息,那么可以通过Android studio的的设置的方法,来对Android studio方法的提示显 ...
- UseAdaptiveSizePolicy与CMS垃圾回收同时使用导致的JVM报错
系统在灰度环境上变更时发现JVM启动报错,详细检查JVM配置参数,发现新境了如下配置: -XX:+UseAdaptiveSizePolicy和-XX:+UseConcMarkSweepGC 初步猜想是 ...
- android图片压缩方法
android 图片压缩方法: 第一:质量压缩法: private Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = ...