2010-04-30 5 views
1

모달 팝업 대화 상자에 jquery UI 대화 상자를 사용하고 있습니다. Firefox/Chrome에서는 훌륭하게 작동하지만 ie6에서는 끔찍합니다.jquery UI 대화와 우리의 가장 친한 친구, ie6

문제점 : ie6에서 대화 상자를 표시하면 브라우저 창이 커지고 자동으로 아래로 스크롤됩니다. 높이 증가 및 자동 스크롤 다운은 jquery 대화 상자의 높이와 같습니다.

위로 스크롤 한 다음 정상적으로 대화 상자를 사용할 수는 있지만 창과 방울이 증가하는 동작은 무시 무시하게 받아 들일 수 있습니다. 여기

내가 창을 실행하고있어 어떻게 : 이미 6으로 오버레이 문제에 대한 핵심 JQuery와의 bgiframe 플러그인을 사용하고

<div id="dialogWindow"></div> 

... 

     $(document).ready(function() { 
      var $dialog = $("#dialogWindow").dialog({ 
       autoOpen: false, 
       modal: true, 
       minWidth: 560, 
       width: 560, 
       resizable: "true", 
       position: "top" 
      }); 

      $('.addButton').click(function(e) { 
       e.preventDefault(); 
       $('#dialogWindow').load('http://myurl'); 
       $dialog.dialog('open'); 
      }); 
     }); 

. 그러나 이것은 이것과는 무관 한 것처럼 보입니다. 이전에 이걸 본 사람이 있습니까?

답변

2

이 동작은 이전에 보았으며 일반적으로 오버레이 때문에 발생합니다. {modal : true} 옵션을 사용하면 오버레이가 만들어지고 플러그인이로드되면 bgiframe 지원으로 렌더링됩니다.

먼저 {modal : false}를 돌려 페이지가 부 푸는 지 확인한 다음 오버레이라고 판단합니다.

범인인지 확인해야 할 몇 가지 사항이 있습니다.

  • 검사는 오버레이의 스타일이 제대로로드, 당신은
  • 위치 실험 해 JQuery와 - UI를 dialog.css을 포함해야합니다 : 및 플로트 : 스타일
  • 당신의 대화 마크 업을 이동하려고 </body > 태그 바로 위에 있으며, 모달 오버레이가 올바르게 벗어날 수 있습니다.
+0

jquery-ui.dialog.css를 명시 적으로 수정했습니다. .css가 연결된 jquery-ui-1.8.1.css에 이미 정의되어 있다고 생각했지만, 어색하거나 무언가 같을 수도 있습니다. 어쨌든, 고마워! – bradjive

+1

문제를 더 자세히 조사한 후 문제가되었던 .ui-dialog CSS의 정확한 줄은 position : relative였습니다. 위치로 변경 : 절대 및 ie6 다시 행복하게됩니다. – bradjive

0

한 지점에서 비슷한 문제가 발생했습니다.

$('.addButton').click(function(e) { 
    e.preventDefault(); 
    $('#dialogWindow').load('http://myurl'); 
    var y = window.pageYOffset; 
    var x = window.pageXOffset 
    $dialog.dialog('open'); 
    window.scrollTo(x, y); // horizontal and vertical scroll targets 
}); 

위의 작업은 현재 스크롤 좌표를 가져 와서 저장하는 것입니다. 대화 상자가 열리면 메모리의 이전 위치로 다시 스크롤하십시오. 사용자가 거의 즉각적이고 보이지 않아야합니다.

+0

빠른 응답을 주셔서 감사합니다. 이렇게하면 열린 대화 상자로 다시 스크롤되지만 창의 크기가 계속 증가하여 맨 아래에 거대한 공백이 생깁니다. 이 솔루션은 문제 및 코드 주위에 반응하지만 문제를 해결하지는 못합니다. – bradjive