jQuery UI에서 Modal Dialog를 띄울 때 스크롤바가 생긴다

이번 작업은 jQuery Framework, 특히 주목할 것은 jQuery UI을 사용하여, 여러 기능들을 손쉽게 넣었을 뿐만 아니라 UI의 통일성을 이룩할 수 있었다. prototype.js에서 어느정도 불만이 있었기 때문에 framework도입을 꺼리고 있었는데 이번에 사용한 결과, jQuery UI는 아주 필수적인 사용자 인터페이스 요소들을 재구성하는데 상당히 유용하게 쓰였다. 하지만 (보기와는 달리, 아니 왜 이런 표현을 쓰는가 하면 왠지 웹2.0이라는 구름에 가려 뭔가 화려하지만 투명하지 않은 기분이라) 은근히 사용자가 고치거나 수정해야 할 약간 만족스럽지 않은 부분이 있다. 그중에서도 지금 작성하려는 주제인 "Internet Explorer 8에서 Modal Dialog를 띄웠을 때 가로/세로 스크롤바가 생기는 경우"도 포함이 된다. 이 게시물은 jQuery UI의 개발자 게시판-버그 트래킹 페이지를 기반으로 작성한다.

1.7.2버전에서도, 1.8버전에서도 마찬가지로 발생하는 오류로, 다른 브라우저에서는 오버레이 너비가 가시영역으로 제한되지만, IE8에서는 오버레이 너비가 가시영역+스크롤바로 계산되기 때문에 그에따른 차이로 인해 생되는것으로 보인다 아래에 세가지 해결 방법을 적어본다.

1. 원론적으로 고치는 방법은 다음과 같다.
jquery-ui-1.7.2.custom.min.js 파일에서 addClass("ui-widget-overlay").css({width:this.width(),height:this.height()}); 항목을 찾아 이 부분을 addClass("ui-widget-overlay"); 로 바꾸고 저장한다. 그리고 jquery-ui-1.7.2.custom.css 파일에서 .ui-width-overlay 항목을 찾아 width와 height가 100%으로 해준다.

2. 다른방법으로 Stylesheet 오버라이딩을 사용한다면 다음과 같이 나타낼 수 있다..
ui-widget-overlay {
   position: fixed; /*이부분이 수정된다.*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

3. 그리고 임시적으로 간단히 고치는것은, dialog의 open 이벤트를 다음과 같이 수정하는 것이다. 그야말로 '감춰주는' 것이다. 개인적으로 아주 간단하고 직관적이며 수정이 용이하기 때문에 이 방법을 사용한다.
open: function(event, ui){
   $('body').css('overflow','hidden');
}