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()