1. 程式人生 > >easyUI彈框被遮罩層遮擋

easyUI彈框被遮罩層遮擋

async on() href 復制代碼 iss 無法 get 代碼 url

項目中用到easyui 布局,用到north,west,center三個區域,且在center中間區域嵌入iframe標簽。在主內容區做一些小提示彈窗(例如刪除前的彈窗提示確認)時,會遇到遮罩問題,由於center區域是iframe嵌套的,所以裏面的小彈窗無法覆蓋頁面的頭部和左邊目錄欄。

技術分享圖片

情形一、點擊提示彈窗裏的確認後,提示彈窗消失:

技術分享圖片
//warnTips為傳入的值,例如successMask(“確定要刪除選中的數據嗎?”)
function successMask(warnTips){
    parent.$.messager.alert({
        title:‘‘,
        msg:warnTips,
        draggable:false,
        fn:function(){
       } }); }
技術分享圖片

情形二、點擊提示彈窗裏的確認後,提示彈窗消失,並且頁面跳轉:

技術分享圖片
//使用方法,successMask(‘刪除成功!‘,‘system/js/rolepermissions.jsp‘)
function successMask(warnTips,url){ parent.$.messager.alert({ title:‘‘, msg:warnTips, draggable:false, fn:function(){   //點擊確認後,頁面跳轉 window.location.href = url; } }); }
技術分享圖片

使用以上代碼可以完美解決easyUI center區域iframe裏的alert提示彈窗、confirm彈窗的遮罩問題。

這裏再做一個拓展,如果是confirm確認彈窗,改如何處理遮罩問題?

例如刪除前提示確認,點擊確認後,內容被刪除,再彈出刪除成功提示框:

技術分享圖片

技術分享圖片

用如下代碼,就可以解決問題

技術分享圖片
parent.$.messager.confirm({
        title:‘‘,
        msg:‘確定要刪除選中的數據嗎?‘,    
        draggable:false,
        fn:function(boolean){
            if(boolean){//確定刪除操作                
                var id = $(obj).attr ("id");
                $.ajaxSettings.async = false; 
                $.get("roleAction!deleteRole.html",{q:new Date().getTime(),id:id},function(data){
                      if(data==‘success‘){
                          successMask(‘刪除成功!‘,‘system/js/rolepermissions.jsp‘)
                        }else{
                            infoMask(data);
              }
        }
     }
}

easyUI彈框被遮罩層遮擋