javascript代码实例教程-jQuery前端框架easyui使用Dialog时bug处理

发布时间:2018-12-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery前端框架easyui使用Dialog时bug处理脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

代码如下:


&nbsp;<input tyPE="button" value="确认预约" id="BTnconfirm" onclick="javascript:openconfirmDlg();" />
    <p 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>
    </p>
     <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();" />
    <p 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>
    </p>
     <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()}); //调整遮罩层的高度为网页内容高度

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery前端框架easyui使用Dialog时bug处理全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery前端框架easyui使用Dialog时bug处理所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。