easyUI彈框被遮罩層遮擋

項目中用到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);
　　　　　　　　　　　　　　}
　　　　　　　　}
　　　　　}
}