jQuery前端框架easyui使用Dialog时bug处理


Posted in Javascript onDecember 05, 2014

最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码:

 <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" />

    <div id="confirmd">  

        <p>请选择确认结果:</p>

        <p><input type="radio" value="True" id="rtrue" name="rresult" class="rresult" /><label for="rtrue">成功</label>

             

        <input type="radio" value="False" id="rfalse" name="rresult" class="rresult" /><label for="rfalse">失败</label></p>

    </div>

     <script type="text/javascript">

         $("#confirmd").dialog({

             title: '预约确认',

             iconCls: 'icon-save', resizable: false, modal: true, closed: true,

             width: 200, height: 200,

             buttons: [{ text: '提 交', handler: function () {

                 alert("ok");

             }

             }, { text: '取 消', handler: function () {

                 $("#confirmd").dialog("close");

             }

             }]

         });

     function openconfirmDlg() {

         $("#confirmd").dialog("open");

     }

     </script>

当点击【确认预约】按钮时,打开对话框,效果如下:

jQuery前端框架easyui使用Dialog时bug处理

可以看到几个问题,一是遮罩层没有全部盖住网页内容,二是对话框不见了,当然不是真的不见了,而是显示到了页面的上方,需要将滚动条拖回到项端方可见到,造成这样的原因很清楚,一是获取网页内容高度不正确,只是得到了window的高度(即可视高度),才会出现遮罩不完整,二是定位不正确,未能正确识别到scrollTop,造成对话框定位不准,针对这些问题,我做出了相应的改进,从而解决了该问题,下面是改进后的代码:

    <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" />

    <div id="confirmd">  

        <p>请选择确认结果:</p>

        <p><input type="radio" value="True" id="rtrue" name="rresult" class="rresult" /><label for="rtrue">成功</label>

             

        <input type="radio" value="False" id="rfalse" name="rresult" class="rresult" /><label for="rfalse">失败</label></p>

    </div>

     <script type="text/javascript">

         $("#confirmd").dialog({

             title: '预约确认',

             iconCls: 'icon-save', resizable: false, modal: true, closed: true,

             width: 200, height: 200,

             buttons: [{ text: '提 交', handler: function () {

                 alert("ok");

             }

             }, { text: '取 消', 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>

现在打开对话框就正常了,效果如下:

jQuery前端框架easyui使用Dialog时bug处理

即使滚动也能始终处在网页中间,效果如下:

jQuery前端框架easyui使用Dialog时bug处理

确保如上效果的关键代码是:

         $("#confirmd").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 }); //移动到当前内容页面的中间

         $(".window-mask").css({ height: $(document).height()}); //调整遮罩层的高度为网页内容高度

大家测试下,是不是比之前的好用多了,本人测试了大多数浏览器都没有问题,如果有遗漏的,还请留言告之,本代码持续更新。

Javascript 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 #Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 #Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 #Javascript
jquery实现动态画圆
Dec 04 #Javascript
javascript数组遍历for与for in区别详解
Dec 04 #Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 #Javascript
express的中间件cookieParser详解
Dec 04 #Javascript
You might like
如何用php获取程序执行的时间
2013/06/09 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
stripos函数知识点实例分享
2019/02/11 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
用于table内容排序
2006/07/21 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python库安装速度过慢解决方案
2020/07/14 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
上班睡觉检讨书
2014/01/09 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
专家推荐信模板
2014/05/09 职场文书
个人授权委托书格式
2014/08/30 职场文书
雨花台导游词
2015/02/06 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
Python Django模型详解
2021/10/05 Python
Python如何加载模型并查看网络
2022/07/15 Python