jQuery UI 대화 상자의 iFrame이 상위 요소에 가로 스크롤 막대를 발생시킵니다.
-
13-09-2019 - |
문제
저는 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:
- 찾다
.ui-widget-overlay
. - 다음 규칙을 추가하십시오.
position:fixed;
.
해결책 b
수정하다 jQuery-UI-1.7.2.custom.min.js:
- 찾다
addClass("ui-widget-overlay").css({width:this.width(),height:this.height()});
97 행 - 삭제
.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");
}
});