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");
            });
  • 相关阅读:
    Visual Studio2019安装步骤
    写在第一页的话
    数状数组
    hdu 3501 数学题
    静态邻接表
    最长子序列
    hdu 1094 所想到的
    bellman_ford
    郁闷的一晚
    SPFA + 静态邻接表 模板
  • 原文地址:https://www.cnblogs.com/webglcn/p/4660859.html
Copyright © 2011-2022 走看看