Jquery. UI. Dialog 1.81 has a scroll bar bug in IE8. Solution

Recently, in terms of Web user experience, the supervisor and the boss agreed to use the jquery plug-in. Therefore, jquery technology is used in existing projects, I have encountered some problems when using the jquery plug-in.
Jquery was used some time ago. validate 1. 7. during plug-in, remote verification is abnormal, and some source files are modified to solve the problem. jquery is used today. UI. dialog. JS (jquery UI dialog 1.8.10) for lightbox effects, there are some minor issues, such as setting the modal: True attribute, in IE8 open dialog will appear scroll bar (not before open ), after the dialog is closed, the window returns to normal.

 
VaR dialog =$ ("# divdialog "). dialog ({autoopen: false, width: 350, height: 160, buttons: {"OK": function () {$ (this ). dialog ("close") ;}, title: "prompt:", modal: True, resizable: false });
 

Some information has been found on the internet, and jquery official feedback on this issue: the jquery official website has two typical solutions:

1. comment out the width and height of the Central Control "background layer" in the JS FileCodeChanged to CSS file control.
2. Set overflow to hidden when open dialog and overflow to auto when close dialog.

The two solutions can solve the problem, but they are not solved from the crux of the problem. If you can find the code that causes the problem and modify it from the source, it will be better (in fact the problem is very clear ).
Analysis: the scroll bar is displayed in open dialog because the size of the content area ("background layer") exceeds the size of the parent container. therefore, you only need. UI. dialog. in the JS source file, find the code for creating the "background layer" and adjust the width and height to a reasonable range. The following describes how to create the "background layer:

 
// Line 2 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 rows
 

the code for setting the width height is this. Width () and this. Height (). The corresponding method is as follows:

// Row 777 Height: function () {var scrollheight, offsetheight; // handle ie 6if ($. browser. MSIE & $. browser. version <7) {scrollheight = math.max(document.doc umentelement. scrollheight, document. body. scrollheight); offsetheight = math.max(document.doc umentelement. 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 6if ($. browser. MSIE & $. browser. version <7) {scrollwidth = math.max(document.doc umentelement. scrollwidth, document. body. scrollwidth); offsetwidth = math.max(document.doc umentelement. offsetwidth, document. body. offsetwidth); If (scrollwidth <offsetwidth) {return $ (window ). width () + 'px ';} else {return scrollwidth + 'px';} // handle "good" browsers} else {return $ (document ). width () + 'px ';}}, // 825 rows

we can see that when obtaining the browser window size, the author only performs compatibility processing on IE6. in fact, IE7 and IE8 should also be compatible. therefore, remove "$. browser. version <7 "to get the real size of the browser. the code after modification is as follows:

// Row 777 Height: function () {var scrollheight, offsetheight; // handle ie 6if ($. browser. MSIE) {scrollheight = math.max(document.doc umentelement. scrollheight, document. body. scrollheight); offsetheight = math.max(document.doc umentelement. 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 6if ($. browser. MSIE) {scrollwidth = math.max(document.doc umentelement. scrollwidth, document. body. scrollwidth); offsetwidth = math.max(document.doc umentelement. offsetwidth, document. body. offsetwidth); If (scrollwidth <offsetwidth) {return $ (window ). width () + 'px ';} else {return scrollwidth + 'px';} // handle "good" browsers} else {return $ (document ). width () + 'px ';}}, // 825 rows

IE6, IE7, and IE8 open dialog (set modal: True) have no scroll bars.