easyui 中iframe巢狀頁面，大彈窗自適應居中的解決方法。$('#win').window()

easyui 中iframe巢狀頁面，大彈窗自適應居中的解決方法。$('#win').window()

以下是左邊欄和頭部外層遮罩顯示和隱藏方法

/*外層 遮罩顯示*/
function wrapMaskShow(){
    var maskTop = window.top.$("#mask-top");//外層遮罩
    var maskLeft = window.top.$("#mask-left");
    maskTop.show();
    maskLeft.show();
    $('body').css('overflow','hidden');//禁止滾動
}

/*外層 遮罩隱藏*/
function wrapMaskHide(){
    var maskTop = window.top.$("#mask-top");
    var maskLeft = window.top.$("#mask-left");
    maskTop.hide();
    maskLeft.hide();
    $('body').css('overflow','auto');//恢復滾動
}

 

以下是彈窗生成方法

<div id="win"></div>

/*彈窗*/
    function windowmask(){
        /*外層 遮罩顯示*/
        wrapMaskShow();

        $('#win').window({
            width:800,
            height:560,
            modal:true,
            title:'新增區域',
            collapsible:false,
            minimizable:false,
            maximizable:false,
            draggable:false,
            resizable:false,
            onClose : function () {
                /*外層 遮罩隱藏*/
                wrapMaskHide();
            }
        });
        winHiSelfAdaptation($('#win'));//高度自適應
        
    }

 

以下是彈窗高度自適應居中的方法

//彈窗高度自適應
function winHiSelfAdaptation(o){
    var htmlW =  $(window).width();//子頁面寬度
    var oParent = o.parents('.window');//彈窗
    var h = oParent.height();
    var w = oParent.width();
    var mgt = h/2;//彈窗高度一半
    var mgl = w/2;//寬度一半
    oParent.css({
        'position':'fixed',
        'top':'50%',
        'left':'50%',
        'margin-top':-mgt+'px',
        'margin-left':-mgl-100+'px'//這裡的-100是因為左邊目錄欄寬度是200px，為了居中，所有彈窗margin-left需要減去100px
    });
    if(htmlW<1000){
        oParent.css('margin-left',-mgl+'px');//小螢幕顯示器，避免彈窗被左邊目錄欄遮住
    }
}

通過以上程式碼和說明，就能完美解決easyui 中iframe巢狀頁面，大彈窗自適應居中問題。$('#win').window()