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");
            });
  • 相关阅读:
    Talend open studio数据导入、导出、同步Mysql、oracle、sqlserver简单案例
    Mysql彻底卸载
    .net图片快速去底(去除白色背景)
    .net图片自动裁剪白边函数案例
    .net图片裁剪抠图之性能优化
    .net图片压缩
    .net微软消息队列(msmq)简单案例
    SVM手撕公式
    算法效率分析
    模型稳定性
  • 原文地址:https://www.cnblogs.com/webglcn/p/4660859.html
Copyright © 2011-2022 走看看