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