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.10var $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 ) 后均没有滚动条.

您当前的位置：KKBlog > 学无止境 > WEB前端

相关文章