DHTML_javascript 팁의 절대 위치 지정

다음은
복잡한 상황에서 요소 옆에 DIV를 가장 잘 표시하는 방법을 보여줍니다.
물론 버튼이 창의 왼쪽/위/오른쪽/아래에 가까이 오도록 창을 스크롤하면서 메뉴의 팝업 위치를 관찰할 수도 있습니다.
모든 코드:

코드 복사 코드는 다음과 같습니다.

<table border=1 cellpadding=8 cellspacing=0> 
<tr><td>table1</td><td>table1</td></tr> 
<tr><td>table1</td><td> 
 <div id=div1 style='position:absolute;background-color:wheat;padding:4px;'> 
 div1 start 
 <div id=div1button style='border:outset 2px;background-color:threedface;color:red;font-weight:bold;cursor:hand;padding:4px;'> 
  ClickMe 
 </div> 
 div1 end 
 </div> 
 </td></tr> 
</table> 
<div style='height:100px'>-</div> 
<table border=1 cellpadding=8 cellspacing=0> 
<tr><td>table2</td><td>table2</td></tr> 
<tr><td>table2</td><td> 
 <div id=div2 style='position:relative;left:24px;background-color:wheat;'> 
 div2 start 
 <div id=div2menu style='display:none;position:absolute;background-color:lightgrey;height:200px;width:120px;border:outset 1px;padding:4px'> 
  div2menu<br> 
  div2menu<br> 
  div2menu<br> 
  div2menu<br> 
  div2menu<br> 
 </div> 
 div2 end 
 </div> 
 </td></tr> 
</테이블> 
<script 언어='jscript'> 
//요소의 위치 가져오기(스크롤 오프셋을 통해) 
 if(e==b)return {왼쪽:0,위:0}; 
 with(e.getBoundingClientRect()) 
 { 
  return {left:b.scrollLeft left,top:b.scrollTop top}; 
 } 
} 
//요소의 위치 가져오기(클라이언트 오프셋으로) 
함수 LostinetWebGetClientPosition(e) 
{ 
var b=e.document.body; 
 if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop}; 
 with(e.getBoundingClientRect()) 
 { 
  return {left:left-b.clientLeft,top:top-b.clientTop}; 
 } 
} 
//절대 또는 상대 상위 가져오기 
함수 LostinetWebGetStandParent(e) 
{ 
 for(var p=e.parentElement;p!=null;p=p .parentElement) 
 { 
  var sp=p.currentStyle.position; 
  if(sp=='absolute'||sp=='relative') 
   return p; 
 } 
 e.document.body를 반환합니다. 
} 
//calc e에 상대적인 floate의 위치 
함수 LostinetWebCalcPosition(floate,e) 
{ 
 var epos=LostinetWebGetScrollPostion(e); 
 var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate)); 
 var s=LostinetWebGetStandParent(floate); 
 반환 {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop}; 
} 
//floate를 배치할 수 있는 가장 좋은 위치를 얻습니다.
함수 LostinetWebAdjustMirror(floate,e,pos) 
{ 
 //c:Client,f:floate,e:e, p:floate의 StandParent,m:Mirror 
 var cw=e.document.body.clientWidth; 
 var ch=e.document.body.clientHeight; 
 var fw=floate.offsetWidth; 
 var fh=floate.offsetHeight; 
 var ew=e.offsetWidth; 
 var eh=e.offsetHeight; 
 var ecpos=LostinetWebGetClientPosition(e); 
 var empos={left:ecpos.left ew/2,top:ecpos.top eh/2}; 
 var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate)); 
 var fcpos=LostinetWebGetClientPosition(floate); 
 var fmpos={left:pcpos.left pos.left fw/2,top:pcpos.top pos.top fh/2}; 
 //왼쪽<-->오른쪽 
 if( (fmpos.left<empos.left) ? ((fmpos.left-fw/2<0)&&((empos.left*2-fmpos. left) fw/2<=cw)) : ((fmpos.left fw/2>cw)&&((empos.left*2-fmpos.left)-fw/2>=0)) ) 
  fmpos. 왼쪽=empos.left*2-fmpos.left; 
 //topbottom 
 if( (fmpos.top<empos.top) ? ((fmpos.top-fh/2<0)&&((empos.top*2-fmpos. top) fh/2<=ch)) : ((fmpos.top fh/2>ch)&&((empos.top*2-fmpos.top)-fh/2>=0)) ) 
  fmpos. top=empos.top*2-fmpos.top; 
 pos.left=fmpos.left-pcpos.left-fw/2; 
 pos.top=fmpos.top-pcpos.top-fh/2; 
} 
document.attachEvent('onclick',function f() 
{ 
 if(div1button.contains(event.srcElement))return; 
 if(div2menu.contains(event. srcElement))return;
 div2menu.runtimeStyle.display='none';
}); 
기능 div1button.onclick() 
{ 
 div2menu.runtimeStyle.display='block'; 
 var pos=LostinetWebCalcPosition(div2menu,div1button); 
 pos.top =div1button.offsetHeight; 
 LostinetWebAdjustMirror(div2menu,div1button,pos); 
 div2menu.runtimeStyle.left=pos.left; 
 div2menu.runtimeStyle.top=pos.top; 
} 
</script>