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