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