Js popup position which right under target item

    <div style="margin-left:100px;">
        <span id="txt" style="color:#eeeeff;abc</span>

        <div id="divPop" style="z-index:500;position:absolute;display:none;color:#ffffff;background-color:#000000">
            Hello World! This is Popup Div.
        </div>
    </div>
    jQuery.fn.popupDiv = 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"
            });
            if ($(divToPop).css(‘display‘) !== ‘none‘) {
                $(divToPop).hide();
            }
            else {
                $(divToPop).show();
            }
        });
    };

        $(document).ready(function() {
            $("#txt").popupDiv("#divPop");
        });
时间: 2024-11-04 12:36:26

Js popup position which right under target item的相关文章

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

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

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

js中window.location.href解决target的问题

location是没办法设置target的.location就是本地本页的意思,只能设置本页的指向,如果界面中用到iframe那么可以这样: parent.frames["iframe的name"].window.loaction.href="a.jsp";

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

3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&qu

常用js操作:

点击空白区域  关闭弹出层 $(document).mouseup(function(e){ var _con = $("#node_list");   // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 $(".note_menu").click(); } }); /* Mark 1 的原理: 判断点击事件发生在区域外的条件是: 1. 点击事件

JS 面向对象 实现烟花特效

基本效果如图: 这里的烟花特效 是配合鼠标点击去实现的  (你要是想绑定别的事件也可) 创建一个烟花,从底部升起运动到目标位置 到达目标位置之后,删除它的同时 炸出一堆烟花 HTML布局+CSS样式 <div class="container"></div> 1 <style> 2 .container{ 3 width: 80%; 4 height: 300px; 5 border: 2px solid red; 6 background: #00

自己的JS框架--Amy框架。

这是我根据司徒正美<JavaScript框架设计>一书然后百度了很多东西之后自己写的一个JS框架,满足了司徒正美文中的种子模块部分,包含了命名空间.对象扩展.数组化.类型判断.选择器.多库并存,在异步加载中使用了CMD规范的seaJs,这个框架一年前就已经写了,之后一直在研究其他东西,没有进行扩展,今天把它发布出来也是为了时刻提醒自己,以后一定要继续扩展它. 下面是代码: //立即执行的函数表达式 (function(){ //定义全局变量_$存储window.$ var window = t

非常使用的js组件

1.实现商城评分小星星 /** * JS评分效果 */function Score(options) {    this.config = {        selector: '.star',     // 评分容器        renderCallback: null,        // 渲染页面后回调        callback: null         // 点击评分回调    }; this.cache = {        aMsg: [            "很不满意|

js 类工厂

js中的类工厂就是因为js中一直没有真正的类.创建类工厂是为了模拟类,类工厂的主要部分就是prototype的扩展和返回一个基本的用来new的函数 prototype扩展 首先是prototype的扩展,可以用一个简单的for...in...循环来实现. for(var item in from){ if(from.hasOwnProperty(item)){ target[item] = from[item]; } } 但是自从有getOwnPropertyDescriptor后,我们就有了一