jQuery UI 대화 상자의 iFrame이 상위 요소에 가로 스크롤 막대를 발생시킵니다.

StackOverflow https://stackoverflow.com/questions/1856258

문제

저는 jQuery UI 대화 상자를 사용하여 새 iFrame에 콘텐츠를 표시하고 있습니다.대화 상자가 표시되는 동안 대화 상자의 상위 창이 가로 스크롤 막대를 얻는다는 점을 제외하면 모든 것이 잘 작동합니다(IE8).580px div의 iFrame 페이지에 있는 유일한 콘텐츠임에도 불구하고 브라우저에서 매우 넓은 것으로 해석되는 iFrame 내의 <html> 요소에 대한 문제를 추적했습니다.

iFrame 내의 HTML 및 BODY 태그에 CSS를 추가해 보았습니다(예:너비:98% 또는 너비:600px;)...어느 것도 영향을 미치지 않는 것 같습니다.

대화 상자를 여는 코드는 다음과 같습니다.어떤 제안이 있으십니까?

$("a[providerId]").click(function(e) {
                e.preventDefault();
                var $this = $(this);
                var $width = 600;
                var $height = 400;
                $('<iframe id="companyDetail" class="companyDetail" style="padding: 0px;" src="' + this.href + '" />').dialog({
                    title: $this.attr('title'),
                    autoOpen: true,
                    width: $width,
                    height: $height,
                    modal: true,
                    resizable: false,
                    autoResize: true,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                }).width($width).height($height);
            });

업데이트:IE8에서 내가 말하는 내용을 보려면 코드가 있는 다음 데모를 확인하세요. http://elijahmanor.com/demos/jqueryuidialogiframe/index.html

도움이 되었습니까?

해결책

이것은 jQuery UI 1.7.2의 작은 버그 인 것 같습니다. 오픈 티켓 (#3623) 문제에. 티켓 의견에는 두 가지 솔루션이 제안됩니다.

해결책 a

수정하다 jQuery-UI-1.7.2.Custom.CSS:

  1. 찾다 .ui-widget-overlay.
  2. 다음 규칙을 추가하십시오. position:fixed;.

해결책 b

수정하다 jQuery-UI-1.7.2.custom.min.js:

  1. 찾다 addClass("ui-widget-overlay").css({width:this.width(),height:this.height()}); 97 행
  2. 삭제 .css({width:this.width(),height:this.height()}).

다른 팁

나의 첫 생각은 overflow-x : hidden 그리고 제 경우에는 표준 모드와 Quirks 모드의 IE8에서는 수평 막대 불가능한 트릭을 수행합니다. 바디 태그에 넣기 만하면됩니다.

  • 모달 UI가 표시될 때만 발생하는 경우 오버레이를 담당하는 div를 제어하는 ​​CSS를 확인하세요.
  • 문서 유형도 확인하십시오.
  • 가지고 놀아봤어? overflow:hidden ?

문제의 온라인 데모에 URL을 게시하면 도움이 될 것입니다.

나는 같은 문제가 있었다. 제 경우에는 대화 상자가 신체의 자녀이며 오버플로를 방지하기 위해 다음 스크립트를 사용했습니다.

$("#your-dialog").dialog({
  //our options,
  open: function(){
    $("body").css("overflow", "hidden");
  },
  close: function(){
    $("body").css("overflow", "initial");
  }
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top