Jquery.ui.dialog 1.81 The method of rolling bar failure in IE8

Jquery.ui.dialog 1.81 The method of rolling bar failure in IE8

var dialog = $ ("#divdialog"). Dialog ({
Autoopen:false
, width:350
, height:160
, buttons:{
"Confirm": function () {
$ (This). dialog ("Close");
}
}
, title: "Hint:"
, Modal:true
, Resizable:false
});
1. Note out the JS file in the control "background layer" wide, high code, changed by the CSS tutorial files.
2. Set the overflow to hidden when open dialog, and the overflow to Auto when dialog close.

Both of these solutions can solve the problem, but not from the crux of the problem. It would be better if you could find the code that caused the cause (the problem is very clear, actually).
Analysis: The open dialog appears because the content area (background layer) size is outside the parent container's viewable area. In the Jquery.ui.dialog.js source file, the following code creates a "background layer" here, with the background layer wide and the height set at this point:

742 lines of 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 lines
The code that sets the width high is this.width () and This.height (), and the corresponding method is as follows:
777 Lines

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 Lines
When the browser window size is obtained, the author only handles IE6. In fact, IE7,IE8 should also be within the scope of compatible processing. So remove "$.browser.version < 7" To get the real size of the browser. The following is the changed code:

777 Lines
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 Line
Test IE6,IE7,IE8 Open dialog (set modal:true), no scroll bars after open dialog