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 得到文件后缀(通过正则实现)
Jul 08 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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脚本数据库功能详解(中)
2006/10/09 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python中encode()方法的使用简介
2015/05/18 Python
Python有序字典简单实现方法示例
2017/09/28 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python 元组操作总结
2019/09/18 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
详解pandas赋值失败问题解决
2020/11/29 Python
校园十大歌手策划书
2014/02/01 职场文书
2014全国两会心得体会
2014/03/17 职场文书
工商管理专业自荐信
2014/06/03 职场文书
开平碉楼导游词
2015/02/06 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS