一个简单的遮罩的例子
1。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <jsp:useBean id="mask" class="webpackage.MasksUtil"/> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MasksTest页面</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <mce:script type="text/javascript" src="../common/js/util.js" mce_src="common/js/util.js"></mce:script> <mce:script type="text/javascript" src="../common/js/jquery-1.3.2.min.js" mce_src="common/js/jquery-1.3.2.min.js"></mce:script> <mce:style type="text/css"><!-- .dialog{ position: absolute; top:expression(Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)/3); left: 40%; margin:0 5px 0 10px; z-index:200; } --></mce:style><style type="text/css" mce_bogus="1"> .dialog{ position: absolute; top:expression(Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)/3); left: 40%; margin:0 5px 0 10px; z-index:200; } </style> </head> <% //String str = "window.open('test.jsp','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');"; String getStr = mask.getShowDialogString(true, false, "test.jsp?name=linwei", "900", "600"); out.println(getStr); %> <body> <div id="dialogDiv" class="dialog" style="display: none;" mce_style="display: none;" value="123"> <div id="processRunBar" class="divProcessBar" style="border:1px solid gray" mce_style="border:1px solid gray"> <table border="0" cellSpacing=8px cellPadding=8px> <tr> <td align=center><img border="0" src="../common/images/runing.gif" mce_src="common/images/runing.gif" align="absmiddle"/></td> </tr> <tr> <td align=center id="barContent">操作正在进行中,请稍候...</td> </tr> </table> </div> </div> <form action="test.jsp"> //当加上form时，有需要用setTimeOut来延迟提交的时候，不能用submit按钮来 //操作，必须把类型转化为 button来实现就可以的了 <input type="button" id="sub" name="sub" value="提交" ></input> <input type="hidden" id="refresh" style="display:none" mce_style="display:none"/> <input type="text" id="childoper" style="display:none" mce_style="display:none" value="lin"/> </form> </body> </html> <mce:script type="text/javascript"><!-- $(document).ready(function(){ window.onload = function(){ //alert("here is " + document.getElementById("dialogDiv").value); createIframe(document.getElementById("dialogDiv")); } $("#sub").click(function(){ showMark(document.getElementById("dialogDiv")); setTimeout("showDialog()",3000); }); $("#refresh").click(function(){ //window.location.reload(); $("#childoper").toggle().val("linweilinwei"); }); }); function showDialog() { hiddenMark(document.getElementById("dialogDiv")); <%=getStr%> } // --></mce:script>
2。
package webpackage; /** * 该类为遮罩中所需要调用的例子 * @author linwei * */ public class MasksUtil { /** * 通过外部传递的参数来组装显示的窗口 * @param showModal 是否弹出模式窗口。如果为true则弹出模式窗口；否则弹出非模式窗口。 * @param refreshParent 当关闭弹出的模式窗口时，是否刷新父窗口。如果为true则刷新父窗口；否则不刷新父窗口。该参数只对弹出模式窗口有效。 * @param url 弹出窗口的URL * @param feature 弹出窗口的特征。特征值间用分号分隔，可设置的特征值有： * dialogHeight * dialogLeft * dialogTop * dialogWidth * center:{ yes | no | 1 | 0 | on | off } * dialogHide:{ yes | no | 1 | 0 | on | off } * edge:{ sunken | raised } * help:{ yes | no | 1 | 0 | on | off } * resizable:{ yes | no | 1 | 0 | on | off } * scroll:{ yes | no | 1 | 0 | on | off } * status:{ yes | no | 1 | 0 | on | off } * unadorned:{ yes | no | 1 | 0 | on | off } */ public String getShowDialogString(boolean showModal, boolean refreshParent, String url, String Width, String Height) { StringBuffer buf = new StringBuffer(); if (showModal) { //弹出模式窗口 buf.append("var rtn=window.showModalDialog('"); } else { //弹出非模式窗口 buf.append("var rtn=window.showModelessDialog('"); } //判断是否有？ if (url.indexOf("?") > 0) { buf.append(((url == null) || (url.length() == 0)) ? "" : (url + "&" + System.currentTimeMillis())); } else { buf.append(((url == null) || (url.length() == 0)) ? "" : (url + "?" + System.currentTimeMillis())); } buf.append("','showModel' ,'"); //buf.append("dialogTop:200px;dialogLeft:300px;dialogHeight:"+Height+"px;dialogWidth:"+Width+"px;status:no;resizable:no"); //buf.append("dialogWidth="+Width+"px,dialogHeight="+Height+"px,left=/"+(window.screen.width-200)/2+/",top=/"+(window.screen.height-100)/2+/""); if (Width.endsWith("px")) buf.append("dialogWidth=" + Width + ";dialogHeight=" + Height); else buf.append("dialogWidth=" + Width + "px,dialogHeight=" + Height + "px"); buf.append("');/n"); if (showModal && refreshParent) { //模式窗口关闭后，刷新父窗口,要强制刷新 buf.append("window.parent.document.getElementById(/"refresh/").click();/n"); } return buf.toString(); } public static void main(String[] args) { MasksUtil m = new MasksUtil(); System.out.println(m.getShowDialogString(true, true, "linwei", "900", "600")); } }
3。
//linwei 创建于2010-09-24 /*** * 创建遮罩层，用于onload事件的加载时候调用 * dialogObj为遮罩层上显示的对话框或者其他需要显示的obj * @author linwei */ function createIframe(dialogObj){ //mask遮罩层 var newMask=document.createElement("div"); newMask.id="maskDiv"; newMask.style.position="absolute"; newMask.style.zIndex="1"; _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth)-20; _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); //newMask.style.width=_scrollWidth+"px"; newMask.style.height=_scrollHeight+"px"; newMask.style.width="100%"//_scrollWidth+"px"; //newMask.style.height="100%"//_scrollHeight+"px"; newMask.style.top="0px"; newMask.style.left="0px"; //newMask.style.background="#E2ECED"; //newMask.style.background="#F2F8F8"; //newMask.style.background="#33393C"; newMask.style.background = "#FFFFFF"; newMask.style.filter="alpha(opacity=40)"; newMask.style.opacity="0.40"; newMask.style.display='none'; //设置对话框的显示层次 dialogObj.style.zIndex="2"; document.body.appendChild(newMask); document.body.appendChild(dialogObj); } /** * 显示遮罩层 */ function showMark(dialogObj){ var mDiv=document.getElementById("maskDiv"); mDiv.style.display=''; dialogObj.style.display = ""; //显示浮动的div } /** * 隐藏遮罩层 */ function hiddenMark(objDiv){ var mDiv=document.getElementById("maskDiv"); mDiv.style.display='none'; objDiv.style.display = "none"; //隐藏浮动的div } //*******************************************************************************************