Jquery easyui dialog Bug Solution

Jquery easyui dialog Bug Solution
I have been using the easyui front-end framework to develop and design the UI recently. However, when using Dialog, I find that if there are many page content, there will be problems. First, let's take a look at my original code: copy the Code <input type = "button" value = "confirm reservation" id = "btnconfirm" onclick = "javascript: openconfirmDlg (); "/> <div id =" confirmd "> <p> select the confirmation result: </p> <input type = "radio" value = "True" id = "rtrue" name = "rresult" class = "rresult"/> <label for = "rtrue"> success </label> & nbsp; & nbsp; <input type = "radio" value = "False" id = "rfalse" name = "rresult" class = "rresult"/> <label for = "rfalse"> failed </ label> </p> </div> <script type = "text/javascript" >$ ("# confirmd "). dialog ({title: 'reservation confirmed', iconCls: 'icon-save', resizable: false, modal: true, closed: true, width: 200, height: 200, buttons: [{text: 'Submit', handler: function () {alert ("OK") ;},{ text: 'taobao', handler: function () {$ ("# confirmd "). dialog ("close") ;}}]}); function openconfirmDlg () {$ ("# confirmd "). dialog ("open") ;}</script> copy the code. When you click "confirm reservation", the dialog box is displayed. The following figure shows the result, first, the mask layer does not cover all the webpage content; second, the dialog box does not disappear. Of course, it does not really disappear, but is displayed at the top of the page. You need to drag the scroll bar back to the item side to see it, the reason for this is clear: first, the height of the webpage content is incorrect. Only when the height of the window is obtained (that is, the visual height) Can the Mask be incomplete, second, the location is incorrect, and scrollTop is not correctly identified. As a result, the dialog box is inaccurate. In response to these problems, I have made corresponding improvements to solve the problem, the improved code is as follows: copy the Code <input type = "button" value = "confirm reservation" id = "btnconfirm" onclick = "javascript: openconfirmDlg (); "/> <div id =" confirmd "> <p> select the confirmation result: </p> <input type = "radio" value = "True" id = "rtrue" name = "rresult" class = "rresult"/> <label for = "rtrue"> success </label> & nbsp; & nbsp; <input type = "radio" value = "False" id = "rfalse" name = "rresult" class = "rresult"/> <label for = "rfalse"> failed </ label> </p> </div> <script type = "text/javascript" >$ ("# confirmd "). dialog ({title: 'reservation confirmed', iconCls: 'icon-save', resizable: false, modal: true, closed: true, width: 200, height: 200, buttons: [{text: 'Submit', handler: function () {alert ("OK") ;},{ text: 'taobao', handler: function () {$ ("# confirmd "). dialog ("close") ;}}]}); window. onscroll = function () {$ ("# confirmd "). dialog ("move", {top: $ (document ). scrollTop () + ($ (window ). height ()-200) * 0.5});} function openconfirmDlg () {$ ("# confirmd "). dialog ("open"); $ ("# confirmd "). dialog ("move", {top: $ (document ). scrollTop () + ($ (window ). height ()-200) * 0.5}); $ (". window-mask ").css ({height: $ (document ). height ()}) ;}</script>: copy the code and open the dialog box. The result is as follows: the page is always in the middle even if you scroll. The result is as follows: the key code to ensure the above effect is: $ ("# confirmd "). dialog ("move", {top: $ (document ). scrollTop () + ($ (window ). height ()-200) * 0.5}); // move to the middle of the current content page $ (". window-mask ").css ({height: $ (document ). height ()}); // adjust the height of the mask layer to the webpage content height