Recently has been using the Easyui front-end framework to develop the design UI, but when using dialog, found that if the page content is more, there will be problems, first look at my original code:
Copy Code code as follows:
<input type= "button" value= "confirm the appointment" id= "btnconfirm" onclick= "Javascript:openconfirmdlg ();"/>
<div id= "CONFIRMD" >
<p> Please select confirmation result:</p>
<p><input type= "Radio" value= "True" id= "Rtrue" name= "Rresult" class= "Rresult"/><label for= "Rtrue" > Success </label>
<input type= "Radio" value= "False" id= "Rfalse" name= "Rresult" class= "Rresult"/><label for= "Rfalse" > Failure < /label></p>
</div>
<script type= "Text/javascript" >
$ ("#confirmd"). Dialog ({
Title: ' Appointment Confirmation ',
Iconcls: ' Icon-save ', Resizable:false, Modal:true, Closed:true,
width:200, height:200,
Buttons: [{text: ' Submit ', handler:function () {
Alert ("OK");
}
}, {text: ' Cancel ', handler:function () {
$ ("#confirmd"). Dialog ("Close");
}
}]
});
function Openconfirmdlg () {
$ ("#confirmd"). Dialog ("Open");
}
</script>
When you click the "Confirm Appointment" button, open the dialog box, the effect is as follows:
You can see a few problems, one is the mask layer does not cover all the content of the Web page, the second is that the dialog box is gone, of course, is not really missing, but to show the top of the page, you need to drag the scroll bar back to the item Duanfang can be seen, resulting in this reason is very clear, one is to get the content of the Web page is highly incorrect, Just gets the height of the window (that is, the visual height), mask is not complete, the second is incorrect positioning, not correctly identified to the scrolltop, resulting in a dialog box positioning, in response to these problems, I made the corresponding improvement, so as to solve the problem, the following is the improved code:
Copy Code code as follows:
<input type= "button" value= "confirm the appointment" id= "btnconfirm" onclick= "Javascript:openconfirmdlg ();"/>
<div id= "CONFIRMD" >
<p> Please select confirmation result:</p>
<p><input type= "Radio" value= "True" id= "Rtrue" name= "Rresult" class= "Rresult"/><label for= "Rtrue" > Success </label>
<input type= "Radio" value= "False" id= "Rfalse" name= "Rresult" class= "Rresult"/><label for= "Rfalse" > Failure < /label></p>
</div>
<script type= "Text/javascript" >
$ ("#confirmd"). Dialog ({
Title: ' Appointment Confirmation ',
Iconcls: ' Icon-save ', Resizable:false, Modal:true, Closed:true,
width:200, height:200,
Buttons: [{text: ' Submit ', handler:function () {
Alert ("OK");
}
}, {text: ' Cancel ', 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 open the dialog box is normal, the effect is as follows:
Even scrolling can always be in the middle of the page, the effect is as follows:
The key code to ensure the effect is:
Copy Code code as follows:
$ ("#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 ()}); Adjusts the height of the mask layer to the height of the page content
Everyone tested, is not more useful than before, I tested most browsers are no problem, if there are omissions, please leave a message, this code continues to update.
