最近一直都在用easyui前端框架来开发设计ui，但在使用dialog时，发现如果页面内容比较多，就会出现问题，首先看一下我的原代码：
复制代码 代码如下:
请选择确认结果：
DBCart 多语言跨境商城
下载
DBCart企业级开源(多语言)商城系统，使用PHP语言基于Laminas + Doctrine 2 组合框架开发完成。可定制、多终端、多场景、多支付、多语言、多货币；严谨的安全机制，可靠稳定；方便的操作管理，节约时间；清晰的权限分配，责任分明；便捷的更新处理，一键搞定；丰富的插件市场，扩展无限。 前台测试： http://ceshi.dbcart.loongdom.cn/ 后
<script type="text/javascript"><br> $("#confirmd").dialog({<br> title: '预约确认',<br> iconCls: 'icon-save', resizable: false, modal: true, closed: true,<br> width: 200, height: 200,<br> buttons: [{ text: '提 交', handler: function () {<br> alert("ok");<br> }<br> }, { text: '取 消', handler: function () {<br> $("#confirmd").dialog("close");<br> }<br> }]<br> });<br> function openconfirmDlg() {<br> $("#confirmd").dialog("open");<br> }<br> </script>
当点击【确认预约】按钮时，打开对话框，效果如下：
立即学习“前端免费学习笔记（深入）”；
可以看到几个问题，一是遮罩层没有全部盖住网页内容，二是对话框不见了，当然不是真的不见了，而是显示到了页面的上方，需要将滚动条拖回到项端方可见到，造成这样的原因很清楚，一是获取网页内容高度不正确，只是得到了window的高度（即可视高度），才会出现遮罩不完整，二是定位不正确，未能正确识别到scrollTop，造成对话框定位不准，针对这些问题，我做出了相应的改进，从而解决了该问题，下面是改进后的代码：
复制代码 代码如下:
请选择确认结果：
<script type="text/javascript"><br> $("#confirmd").dialog({<br> title: '预约确认',<br> iconCls: 'icon-save', resizable: false, modal: true, closed: true,<br> width: 200, height: 200,<br> buttons: [{ text: '提 交', handler: function () {<br> alert("ok");<br> }<br> }, { text: '取 消', handler: function () {<br> $("#confirmd").dialog("close");<br> }<br> }]<br> });<br> window.onscroll = function () {<br> $("#confirmd").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 }); <br> }<br> function openconfirmDlg() {<br> $("#confirmd").dialog("open");<br> $("#confirmd").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 });<br> $(".window-mask").css({ height: $(document).height()});<br> }<br> </script>
现在打开对话框就正常了，效果如下：
即使滚动也能始终处在网页中间，效果如下：
确保如上效果的关键代码是：
复制代码 代码如下:
$("#confirmd").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 }); //移动到当前内容页面的中间
$(".window-mask").css({ height: $(document).height()}); //调整遮罩层的高度为网页内容高度
大家测试下，是不是比之前的好用多了，本人测试了大多数浏览器都没有问题，如果有遗漏的，还请留言告之，本代码持续更新。
