jquery.ui.dialog 1.81在IE8中出现滚动条bug解决方法

       最近在做web用户体验方面的东东,因主管和老板一致赞同使用Jquery插件,因此现有的项目中使用了jquery的技术，在使用jquery插件的过程中遇到一些问题，与大家分享一下.
       前一段时间使用jquery.validate 1.7.插件时，remote验证异常，后来修改部份源文件才解决.今天 在使用jquery.ui.dialog.js(jQuery UI Dialog 1.8.10) 做lightbox效果，出现了一些小问题,例如设置 modal:true属性，在IE8中 open dialog 会出现滚动条(open之前是没有的),close dialog后，窗口恢复正常.

var dialog = $("#divDialog").dialog({
	autoOpen:false
	,width:350
	,height:160
	,buttons:{
		"确认":function(){
			$(this).dialog("close");
		}
	}
	,title:"提示:"
	,modal:true
	,resizable:false
});

  网上查了一些资料,其中jquery官方也有此问题反馈：jquery官网 典型的有两种解决方法，分别是:

    1.注释掉js文件中控置"背景层"宽、高的代码,改由css文件控制.
    2.在open dialog时将overflow设为hidden, close dialog时将overflow设为auto。

     这两种方案都能够解决问题，但并非从问题的症结处解决.如果能够找到造成该原因的代码,从源处修改，那样会更好(其实问题很明了).
      分析: open dialog 出现滚动条是因为内容区("背景层")尺寸超出了父容器大小.因此只需在jquery.ui.dialog.js 源文件中,找到创建"背景层"的代码,将宽高调整到合理范围就可以了,如下是创建"背景层"部份:

//742 行 jQuery UI Dialog 1.8.10
var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
	width: this.width(),
	height: this.height()
});
//747 行

其中设置宽高的代码为this.width()与this.height(),对应方法如下:

//777 行
height: function() {
		var scrollHeight,
			offsetHeight;
		// handle IE 6
		if ($.browser.msie && $.browser.version < 7) {
			scrollHeight = Math.max(
				document.documentElement.scrollHeight,
				document.body.scrollHeight
			);
			offsetHeight = Math.max(
				document.documentElement.offsetHeight,
				document.body.offsetHeight
			);

			if (scrollHeight < offsetHeight) {
				return $(window).height() + 'px';
			} else {
				return scrollHeight + 'px';
			}
		// handle "good" browsers
		} else {
			return $(document).height() + 'px';
		}
	},

	width: function() {
		var scrollWidth,
			offsetWidth;
		// handle IE 6
		if ($.browser.msie && $.browser.version < 7 ) {
			scrollWidth = Math.max(
				document.documentElement.scrollWidth,
				document.body.scrollWidth
			);
			offsetWidth = Math.max(
				document.documentElement.offsetWidth,
				document.body.offsetWidth
			);

			if (scrollWidth < offsetWidth) {
				return $(window).width() + 'px';
			} else {
				return scrollWidth + 'px';
			}
		// handle "good" browsers
		} else {
			return $(document).width() + 'px';
		}
	},
//825 行

       可以看出，在获得浏览器窗口尺寸时,作者只对IE6做兼容处理.而实际上IE7,IE8也应该在兼容处理的范围内. 因此移除掉 "$.browser.version < 7" 便能获得浏览器真实尺寸了.如下是更改后代码:

//777 行
height: function() {
		var scrollHeight,
			offsetHeight;
		// handle IE 6
		if ($.browser.msie) {
  			scrollHeight = Math.max(
				document.documentElement.scrollHeight,
				document.body.scrollHeight
			);
			offsetHeight = Math.max(
				document.documentElement.offsetHeight,
				document.body.offsetHeight
			);

			if (scrollHeight < offsetHeight) {
				return $(window).height() + 'px';
			} else {
				return scrollHeight + 'px';
			}
		// handle "good" browsers
		} else {
			return $(document).height() + 'px';
		}
	},

	width: function() {
		var scrollWidth,
			offsetWidth;
		// handle IE 6
		if ($.browser.msie ) {
			scrollWidth = Math.max(
				document.documentElement.scrollWidth,
				document.body.scrollWidth
			);
			offsetWidth = Math.max(
				document.documentElement.offsetWidth,
				document.body.offsetWidth
			);

			if (scrollWidth < offsetWidth) {
				return $(window).width() + 'px';
			} else {
				return scrollWidth + 'px';
			}
		// handle "good" browsers
		} else {
			return $(document).width() + 'px';
		}
	},
//825 行

     经测试 ie6,ie7,ie8 open dialog(设置 modal:true ) 后均没有滚动条.