2010-03-24 3 views
6

"드롭 다운"div가있는 ASP.NET 웹 파트를 가지고 놀고있었습니다. 그것은 페이지의 오른쪽에있는 모든 방법입니다. 클릭하면 창 밖으로 나옵니다. 일반적으로 볼 수있는 영역을 벗어나는 항목은 아래쪽 스크롤바를 트리거합니다. 이것이 어떻게 가능한지? HTML div가 브라우저 창 밖으로 나갈 수 있습니까?

alt text http://i42.tinypic.com/4sejww.png

편집

: 그것은 인터넷 익스플로러 8의 다음은 몇 가지 상황과 마크 업입니다. 내가 생각하는 관련 id = WebPart_wp774658725VerbsMenu입니다. 기본적으로 표시되지 않습니다. td/span 동사/span VerbsPopup (어떤 것이 든 될 수 있음)을 클릭하면 "드롭 다운"이 표시됩니다. 개발자 도구에서 해당 요소에 연결된 JavaScript가 표시되지 않지만 디버깅 할 경우 일부는 실행되는 것을 볼 수 있습니다.

<TD class=partTitle> 
    <TABLE style="WIDTH: 100%" border=0 cellSpacing=0 cellPadding=0> 
    <TBODY> 
     <TR> 
     <TD style="WIDTH: 100%; WHITE-SPACE: nowrap; CURSOR: move" id=WebPartTitle_wp774658725><SPAN title="Billing Information">Billing Information</SPAN>&nbsp;</TD> 
     <TD style="WHITE-SPACE: nowrap"> 
      <SPAN style="PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: inline-block; COLOR: white; CURSOR: hand; TEXT-DECORATION: none; PADDING-TOP: 1px" id=WebPart_wp774658725Verbs> 
      <SPAN style="FONT-FAMILY: Marlett; FONT-SIZE: 8pt" id=WebPart_wp774658725VerbsPopup>u</SPAN> 
      </SPAN> 
      <DIV style="DISPLAY: none" id=WebPart_wp774658725VerbsMenu> 
      <TABLE style="BORDER-BOTTOM: white 1px solid; BORDER-LEFT: white 1px solid; BACKGROUND-COLOR: maroon; WIDTH: 100%; BORDER-COLLAPSE: collapse; FONT-FAMILY: Arial; FONT-SIZE: 0.8em; BORDER-TOP: white 1px solid; BORDER-RIGHT: white 1px solid" cellSpacing=0 cellPadding=1> 
       <TBODY> 
       <TR> 
        <TD style="WHITE-SPACE: nowrap"> 
        <DIV> 
         <A class=menuItem title="Deletes 'Billing Information'" onclick="if(document.body.__wpmDeleteWarning.length == 0 || confirm(document.body.__wpmDeleteWarning)){document.body.__wpm.SubmitPage('WebFormDisplay1$MainPageWPZ', 'delete:wp774658725');}" href="javascript:void(0)"> 
         <IMG style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; VERTICAL-ALIGN: middle; BORDER-LEFT-STYLE: none" alt="Deletes 'Billing Information'" src="/WebResource.axd?d=5L7XWTaglMPmXRe6NJDkRg2&amp;t=633802513995006876" width=16 height=16>&nbsp;Delete&nbsp; 
         </A> 
        </DIV> 
        </TD> 
       </TR> 
       </TBODY> 
      </TABLE> 
      </DIV> 
     </TD> 
     </TR> 
    </TBODY> 
    </TABLE> 
</TD> 


WebParts.js 
    function WebPartMenu_OnClick() { 
    var a = window.event.srcElement.__menu; 
    if (typeof a != "undefined" && a != null) { 
     cancelEvent(window.event); 
     a.Show() 
    } 
} 

function WebPartMenu_Show() { 
    if (typeof __wpm.menu != "undefined" && __wpm.menu != null) __wpm.menu.Hide(); 
    var e = "<html><head><style>" + "a.menuItem, a.menuItem:Link { display: block; padding: 1px; text-decoration: none; " + this.itemStyle + " }" + "a.menuItem:Hover { " + this.itemHoverStyle + " }" + '</style><body scroll="no" style="border: none; margin: 0; padding: 0;" ondragstart="window.event.returnValue=false;" onclick="popup.hide()">' + this.menuElement.innerHTML + "<body></html>", 
    b = 16, 
    c = 16; 
    this.popup = window.createPopup(); 
    __wpm.menu = this; 
    var d = this.popup.document; 
    d.write(e); 
    this.popup.show(0, 0, b, c); 
    var a = d.body; 
    b = a.scrollWidth; 
    c = a.scrollHeight; 
    if (b < this.menuLabelElement.offsetWidth) b = this.menuLabelElement.offsetWidth + 16; 
    if (this.menuElement.innerHTML.indexOf("progid:DXImageTransform.Microsoft.Shadow") != -1) a.style.paddingRight = "4px"; 
    a.__wpm = __wpm; 
    a.__wpmDeleteWarning = __wpmDeleteWarning; 
    a.__wpmCloseProviderWarning = __wpmCloseProviderWarning; 
    a.popup = this.popup; 
    this.popup.hide(); 
    this.popup.show(0, this.menuLabelElement.offsetHeight, b, c, this.menuLabelElement) 
} 
+0

일부 코드가 도움이 될 수도 있습니다. – AxelEckenberger

+0

네, 무슨 뜻인지 알 겠어요. 툴팁은 OS의 일부이므로 쉽게 설명 할 수 있습니다. 그러나 팝업 메뉴를 설명하기는 쉽지 않습니다. 툴바/메뉴가없는 브라우저 창일까요? –

+2

@ 넬슨 : IE입니다. 맞습니까? – Jeremy

답변

0

여백에 약간을 추가하지 않으시겠습니까? 시간을 절약 할 수있는 가장 쉽고 저렴한 방법입니다.

+0

그래, 그게 문제가 아니야. 브라우저 창에서 어떻게 작동하는지 이해하지 못했습니다. –

관련 문제