Jquery easyui dialog Bug solution, jqueryeasyui

Jquery easyui dialog Bug solution, jqueryeasyui

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:

<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>

When you click confirm reservation, the dialog box is displayed, and the effect is as follows:

You can see several problems. One is that the mask layer does not cover all the webpage content, and the other is that the dialog box does not disappear. Of course, it does not actually 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. This is a clear reason. First, the height of the webpage content is incorrect, but the height of the window (that is, the visible height) is obtained ), the mask is incomplete. Second, the position is incorrect and scrollTop is not correctly identified. As a result, the dialog box cannot be located. In response to these problems, I have made corresponding improvements, to solve this problem, the improved code is as follows:

<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>

Now it is normal to open the dialog box. The effect is as follows:

Even if you scroll, the page is always in the middle. The effect 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