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");
            });
  • 相关阅读:
    子页面与父页面相互调用函数、元素、变量
    springboot项目多数据源及其事务
    mybatis逆向工程
    PageHelper 分页插件
    spring boot 在eclipse中打war包,及jar包
    Spring 定时任务之 @Scheduled cron表达式
    发送邮件
    spring+springmvc+hibernate 框架搭建
    MySQL驱动和数据库字符集设置不搭配
    Oracle与MySQL区别
  • 原文地址:https://www.cnblogs.com/webglcn/p/4660859.html
Copyright © 2011-2022 走看看