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