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");
            });
  • 相关阅读:
    ubuntu LAMP的安装
    windows中安装liunx虚拟机
    jQuery Responsive OneByOne Slider Plugin
    轮播图收集
    移动端图片延迟加载插件
    图片幻灯插件
    小tip: base64:URL背景图片与web页面性能优化
    基于HTML5的可预览多图片Ajax上传
    字体平滑解决方案
    webstorm scss编译css配置
  • 原文地址:https://www.cnblogs.com/webglcn/p/4660859.html
Copyright © 2011-2022 走看看