zoukankan      html  css  js  c++  java
  • 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");
            });
  • 相关阅读:
    安装VMware虚拟机的全过程以及基于Centos7下配置nodejs和mongodb (一)
    webpack入门1
    react心路历程
    JavaScript性能优化【转载】
    JavaScript中继承的实现
    Cookie机制和Session机制
    jQuery 最简化实现
    JavaScript 中的原型(总则)
    JS 数据类型转换以其他
    JavaScript 七种数据类型
  • 原文地址:https://www.cnblogs.com/webglcn/p/4660859.html
Copyright © 2011-2022 走看看