easyui弹出框全局遮罩的实现


用EasyUI作一个管理系统,左边导航栏,右边主区域TAB,tab里面嵌入一个iframe。而后全部的操做都到iframe里面了。在iframe里面引入datagrid,搞个工具栏,弹出框啊什么的都只能遮罩住iframe的页面,虽然没什么大碍,但是看着很不爽啊!我想遮罩住整个页面,怎么办?网上找了下资料有是有,都他们COPY的啊,后来在一个地方找到了,哈哈,网址忘了,原创别骂我哈。这里贴出来,有须要的拿去吧。html

//在工具栏下的按钮调用此函数便可,该函数弹出一个窗口,在页面最顶层,遮罩全局。
//title -- 弹出窗口左上角的名称
//href  -- 该弹出框内部容纳的页面,是一个完整的jsp或html页面
function showWindow(title, href, width, height, modal) {
	var openWin = window.top.$('<div id="myWinId" class="easyui-window" closed="true"></div>').appendTo(window.top.document.body);
	openWin.window({
		title: title,
		width: width === undefined ? 360 : width,
		height: height === undefined ? 300 : height,
		content: '<iframe scrolling="no" frameborder="0"  src="' + parent.getBasePath()+href + '" style="width:100%;height:100%;"></iframe>',
		modal: modal === undefined ? true : modal,
		minimizable: false,
		maximizable: false,
		shadow: false,
		cache: false,
		closed: false,
		collapsible: false,
		resizable: false,
		loadingMessage: '正在加载数据,请稍等片刻......',
		onClose : function(){ 
			openWin.window("destroy"); 
		}
	});
}

//这个函数写在最外面的jsp页面中,即iframe的容器中,子页面调用是前面加上parent便可
function getBasePath() {
	var location = (window.location+'').split('/');  
	var basePath = location[0]+'//'+location[2]+'/'+location[3]+'/'; 
	return basePath;
}

//对于弹出的一些警告框,要想在弹出是遮罩整个页面,把这个封装一下,放在主页面,而后经过
// parent.globalAlert()来调用便可。以此类推,confirm或者progressBar均可以这么作
function globalAlert(name, msg, level) {
	$.messager.alert(name, msg, level);
}

//简单而言,登录进来以后,就是index.jsp,而后index.jsp里有tabs,tabs里有iframe
//经过parent来调用的函数放在index.jsp中,而后iframe中在函数前加上parent.就能够调用了
//这样弹出窗就是在index.jsp页面上了,也就是实现了全局遮罩的效果。
//不知道各位有没有更好的实现方式?请赐教。
相关文章
相关标签/搜索