2013-02-13 3 views
0

웹 페이지에 정보 팝업이 있습니다. 그것은 정보를 보여주는 iframe을 포함합니다. 세로 스크롤 막대를 표시 할 수 없어서 일부 콘텐츠가 표시되지 않습니다.iframe에 스크롤 막대가 표시되지 않음

<div id="lightbox" style="z-index: 10500; top: 1030.6px; left: 0px;"> 
     <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); width: 620px; display: block; height: 320px;"> 
      <div id="modalContainer" style="display: none; padding: 10px;"></div> 
      <div id="frameContainer" style="padding: 10px;"> 
       <iframe id="lightboxFrame" style="z-index: 10500;" frameborder="0" width="600px" height="300px" scrolling="no" src="Info.html?lang=grch&amp;item=436"></iframe> 
      </div> 
      <div id="imageContainer" style="display: none; padding: 10px;"> 
       <img id="lightboxImage" style="display: none;"> 
       <div id="hoverNav" style="display: none; z-index: 10500;"> 
        <a id="prevLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a> 
        <a id="nextLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a> 
       </div> 
      </div> 
      <div id="loading" style="z-index: 10500; display: none;"> 
       <a href="#" id="loadingLink"></a> 
      </div> 
     </div> 
     <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); display: block; width: 620px;"> 
      <div id="imageData"><div id="frameHoverNav" style="display: block; z-index: 10500;"> 
      <a id="framePrevLink" href="#" style="padding-top: 10px; display: none;"></a> 
      <a id="frameNextLink" href="#" style="padding-top: 10px; display: none;"></a> 
     </div> 
     <div id="imageDetails"> 
      <span id="caption" style="z-index: 10500;">&nbsp;</span> 
      <span id="numberDisplay" style="display: none;"></span> 
     </div> 
     <div id="bottomNav"> 
      <a id="bottomNavClose" href="#" style="background-color: rgb(255, 255, 255);">schließen</a> 
     </div> 
    </div> 
</div> 
</div> 

내가 시도 무엇 : (JQuery와 라이트 박스가 마술 지팡이를 흔들었다습니다 그래서 아마 후) 크롬 개발 도구에서 가져온로

는 팝업의 HTML입니다

  • iframe에서 스크롤링 제거 = "no"
  • iframe에서 스크롤링 = "예"로 설정
  • 라이트 박스 요소 및/또는 iframe 요소에 CSS 스타일 추가 : o verflow : auto
  • 오버플로 추가 : 라이트 박스 및/또는 iframe 요소로 스크롤하십시오.
  • 오버 플로우를 추가 : 자동 모든 요소에
  • 추가 오버 플로우를 내 화면
  • 갖는 커피에 불쾌한 일을 말하는 모든 요소
  • 로 이동
  • 는 SO

을에 게시 오버플로 속성을 무시하는 것이 무엇인지 잘 모르겠습니다. 사용자를 인용하면 "IE에서는 완벽하게 표시되지만 FF 또는 Chrome에서는 표시되지 않습니다. scrolling="yes"를 사용

+0

'scrolling = "yes"'를 주면서 확인 했습니까? * 커피 * 및 * 게시는 SO *가 궁극적입니다. :) –

+0

예. 그걸 잊어 버렸어! –

+0

작동하는지 확인하십시오. 그것이 작동하면 답변을 게시하고 동의합니다. :) –

답변

1

시도 :

<div id="lightbox" style="z-index: 10500; top: 1030.6px; left: 0px;"> 
     <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); width: 620px; display: block; height: 320px;"> 
      <div id="modalContainer" style="display: none; padding: 10px;"></div> 
      <div id="frameContainer" style="padding: 10px;"> 
       <iframe id="lightboxFrame" style="z-index: 10500;" frameborder="0" width="600px" height="300px" scrolling="yes" src="http://en.wikipedia.org/wiki/Main_page"></iframe> 
      </div> 
      <div id="imageContainer" style="display: none; padding: 10px;"> 
       <img id="lightboxImage" style="display: none;"> 
       <div id="hoverNav" style="display: none; z-index: 10500;"> 
        <a id="prevLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a> 
        <a id="nextLink" href="#" style="padding-top: 10px; display: none; height: 300px;"></a> 
       </div> 
      </div> 
      <div id="loading" style="z-index: 10500; display: none;"> 
       <a href="#" id="loadingLink"></a> 
      </div> 
     </div> 
     <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); display: block; width: 620px;"> 
      <div id="imageData"><div id="frameHoverNav" style="display: block; z-index: 10500;"> 
      <a id="framePrevLink" href="#" style="padding-top: 10px; display: none;"></a> 
      <a id="frameNextLink" href="#" style="padding-top: 10px; display: none;"></a> 
     </div> 
     <div id="imageDetails"> 
      <span id="caption" style="z-index: 10500;">&nbsp;</span> 
      <span id="numberDisplay" style="display: none;"></span> 
     </div> 
     <div id="bottomNav"> 
      <a id="bottomNavClose" href="#" style="background-color: rgb(255, 255, 255);">schließen</a> 
     </div> 
    </div> 
</div> 

여기에 바이올린을 참조하십시오 : http://jsfiddle.net/f8yMB/

그렇지 않을 경우, 다음 문제는 info.html 페이지에 있습니다.

+1

좋아요, 마침내 나는 완전히 스크롤 = "예"를 삭제했습니다. 그것은 트릭을했다. 기본적으로 같기 때문에 대답을 수락합니다. –

관련 문제