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 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
main.php
2006/12/09 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
this[] 指的是什么内容 讨论
2007/03/24 Javascript
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
NodeJS实现自定义流的方法
2018/08/01 NodeJs
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python僵尸进程产生的原因
2017/07/21 Python
python实现简单中文词频统计示例
2017/11/08 Python
python将回车作为输入内容的实例
2018/06/23 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python实现文字版扫雷
2020/04/24 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
应届生高等护理求职信
2013/10/12 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby