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");
        });

 

posted @ 2015-07-20 11:00  webglcn  阅读(210)  评论(0编辑  收藏  举报