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 相关文章推荐
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
js实现无缝轮播图
Mar 09 Javascript
vue实现井字棋游戏
Sep 29 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
django中send_mail功能实现详解
2018/02/06 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
python中metaclass原理与用法详解
2019/06/25 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python入门之基础语法学习笔记
2020/02/08 Python
python关于变量名的基础知识点
2020/03/03 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
高中语文教学反思
2014/01/16 职场文书
上班玩手机检讨书
2014/02/17 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
python 制作一个gui界面的翻译工具
2021/05/14 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript