快捷導(dǎo)航

jQuery前端框架easyui使用Dialog時bug處理

更新時間：2014年12月05日 08:56:57 投稿：hebedich

本文介紹了在jQuery前端框架easyui開發(fā)UI時，使用Dialog時發(fā)現(xiàn)遮罩無法覆蓋頁面內(nèi)容，而且對話框也顯示不出來，經(jīng)過一番研究，才發(fā)現(xiàn)問題所在，這里分享給大家，有相同情況的小伙伴可以參考下

最近一直都在用easyui前端框架來開發(fā)設(shè)計UI，但在使用Dialog時，發(fā)現(xiàn)如果頁面內(nèi)容比較多，就會出現(xiàn)問題，首先看一下我的原代碼：

復(fù)制代碼代碼如下:

 <input type="button" value="確認(rèn)預(yù)約" id="btnconfirm" onclick="javascript:openconfirmDlg();" />

    <div id="confirmd">  

        <p>請選擇確認(rèn)結(jié)果：</p>

        <p><input type="radio" value="True" id="rtrue" name="rresult" class="rresult" /><label for="rtrue">成功</label>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="radio" value="False" id="rfalse" name="rresult" class="rresult" /><label for="rfalse">失敗</label></p>

    </div>

     <script type="text/javascript">

         $("#confirmd").dialog({

             title: '預(yù)約確認(rèn)',

             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>

當(dāng)點擊【確認(rèn)預(yù)約】按鈕時，打開對話框，效果如下：

可以看到幾個問題，一是遮罩層沒有全部蓋住網(wǎng)頁內(nèi)容，二是對話框不見了，當(dāng)然不是真的不見了，而是顯示到了頁面的上方，需要將滾動條拖回到項端方可見到，造成這樣的原因很清楚，一是獲取網(wǎng)頁內(nèi)容高度不正確，只是得到了window的高度（即可視高度），才會出現(xiàn)遮罩不完整，二是定位不正確，未能正確識別到scrollTop，造成對話框定位不準(zhǔn)，針對這些問題，我做出了相應(yīng)的改進(jìn)，從而解決了該問題，下面是改進(jìn)后的代碼：

復(fù)制代碼代碼如下:

    <input type="button" value="確認(rèn)預(yù)約" id="btnconfirm" onclick="javascript:openconfirmDlg();" />

    <div id="confirmd">  

        <p>請選擇確認(rèn)結(jié)果：</p>

        <p><input type="radio" value="True" id="rtrue" name="rresult" class="rresult" /><label for="rtrue">成功</label>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="radio" value="False" id="rfalse" name="rresult" class="rresult" /><label for="rfalse">失敗</label></p>

    </div>

     <script type="text/javascript">

         $("#confirmd").dialog({

             title: '預(yù)約確認(rèn)',

             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>

現(xiàn)在打開對話框就正常了，效果如下：

即使?jié)L動也能始終處在網(wǎng)頁中間，效果如下：

確保如上效果的關(guān)鍵代碼是：

復(fù)制代碼代碼如下:

         $("#confirmd").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 }); //移動到當(dāng)前內(nèi)容頁面的中間

         $(".window-mask").css({ height: $(document).height()}); //調(diào)整遮罩層的高度為網(wǎng)頁內(nèi)容高度

大家測試下，是不是比之前的好用多了，本人測試了大多數(shù)瀏覽器都沒有問題，如果有遺漏的，還請留言告之，本代碼持續(xù)更新。

您可能感興趣的文章: