【www.gdgbn.com--jquery】
jquery.ui.dialog 1.81在ie8中出现滚动条失效解决方法
var dialog = $("#divdialog").dialog({
autoopen:false
,width:350
,height:160
,buttons:{
"确认":function(){
$(this).dialog("close");
}
}
,title:"提示:"
,modal:true
,resizable:false
});
1.注释掉js文件中控置"背景层"宽、高的代码,改由css教程文件.
2.在open dialog时将overflow设为hidden, dialog close时将overflow设为auto。
这两种方案都能够解决问题,但并非从问题的症结处解决.如果能够找到造成该原因的代码,那样会更好(其实问题很明了).
分析: open dialog 出现滚动条是因为内容区("背景层")尺寸超出了父容器可视区.在jquery.ui.dialog.js 源文件中,如下代码在此处创建"背景层",背景层 宽,高均在此处设定的:
//742 行 jquery ui dialog 1.8.10
var $el = (this.oldinstances.pop() || $("").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 ),open dialog 后均没有滚动条