栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

复制代码 代码如下:
 
     
       

请选择确认结果:


       


             
       


   
    

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

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

复制代码 代码如下:
   
     
       

请选择确认结果:


       


             
       


   
    

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

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

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

复制代码 代码如下:
         $("#/confirm/id").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 }); //移动到当前内容页面的中间
         $(".window-mask").css({ height: $(document).height()}); //调整遮罩层的高度为网页内容高度

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/105300.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号