在jQuery前端框架easyui中使用Dialog时的错误处理

最近用easyUI前端框架开发设计UI，但是在使用Dialog的时候发现如果页面多了就会出现问题。首先，看看我的原始代码：

复制的代码代码如下：输入类型='button '值=' Confirm Reservation ' ID=' BTN Confirm ' onclick=' JavaScript : openconfirm imdlg()；'/div id=' confirmind ' pple选择确认结果：/p pinput type=' radio ' value=' true ' id=' rtrue ' name=' rresult ' class=' rresult '/Label for=' rtrue ' success/Label输入类型=' radio ' value=' false ' id=' r false ' name=' rresult ' class=' rresult '/Label for=' r false ' failed/Label/p/div脚本类型=' text/JavaScript ' $(' confirmind ')。对话框({title : '预订确认'，icon cls:' icon-save '，resizable 3360 false，modal 3360 true，closed 3360 200，Width : 200，height : 200，buttons : [{text :' submit '，handler 3360 function(){ alert(' ok ')；} }，{text:' cancel '，handler : function(){ $(' # confirm id ')。对话框(“关闭”)；} }] });函数openconfirm DLG(){ $(' # confirm id ')。对话框(“打开”)；}/脚本

点击【确认预约】按钮，对话框打开，效果如下：

我们可以看到几个问题：第一，蒙版层没有完全覆盖网页内容；第二，对话框不见了，其实不是真的不见了，而是显示在页面顶部。必须将滚动条拖回项目末端才能看到它。原因很明显。一是网页内容高度不正确，只得到窗口高度(即表观高度)，蒙版不完整；二是定位不正确，没有正确识别scrollTop，导致出现对话框。

复制的代码代码如下：输入类型='button '值=' Confirm Reservation ' ID=' BTN Confirm ' onclick=' JavaScript : openconfirm imdlg()；'/div id=' confirmind ' pple选择确认结果：/p pinput type=' radio ' value=' true ' id=' rtrue ' name=' rresult ' class=' rresult '/Label for=' rtrue ' success/Label输入类型=' radio ' value=' false ' id=' r false ' name=' rresult ' class=' rresult '/Label for=' r false ' failed/Label/p/div脚本类型=' text/JavaScript ' $(' confirmind ')。对话框({title : '预订确认'，icon cls:' icon-save '，resizable 3360 false，modal 3360 true，closed 3360 200，Width : 200，height : 200，buttons : [{text :' submit '，handler 3360 function(){ alert(' ok ')；} }，{text:' cancel '，handler : function(){ $(' # confirm id ')。对话框(“关闭”)；} }] });window . on scroll=function(){ $(' # confirm id ')。对话框('移动'，{ top: $(文档))。scrollTop() ($(窗口)。高度()-200)* 0.5 })；}函数openconfirm DLG(){ $(' # confirm id ')。对话框(“打开”)；$(' # confirmind ')。对话框('移动'，{ top: $(文档))。scrollTop() ($(窗口)。高度()-200)* 0.5 })；$('.“窗口掩码”)。css({ height: $(文档))。height()})；}/脚本现在打开对话框很正常，效果如下：

即使滚动，也可以一直在网页中间。效果如下：

保证上述效果的关键代码是：

复制代码如下： $(' # confirmind ')。对话框('移动'，{top: $(文档))。scrolltop () ($(窗口)。高度()-200)* 0.5 })；//移动到当前内容页面$()的中间。“窗口掩码”)。CSS ({height : $(文档))。height()})；//根据网页内容的高度调整蒙版层的高度

经过测试，比以前好多了。我已经测试了大多数浏览器，没有问题。如有遗漏，请留言，本码持续更新。