弹出框的兑现（层） _Web前端

弹出框的实现（层）
下面给大家一个JSP页面例子
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,com.song.common.right.model.*" %>
<%@ page import="com.sms.model.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false" %>
<%
ApplicationContext context = WebApplicationContextUtils
.getRequiredWebApplicationContext(application);

CommonDao commonDao = (CommonDao)context.getBean("commonDao");
List position = (List)request.getAttribute("position");
//List jobs = commonDao.findObjects(TJobs.class);
List<TJobs> jobs = (List<TJobs>)request.getAttribute("jobs");
List<TSecretary> secretarys = (List<TSecretary>)request.getAttribute("secretarys");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page import="org.springframework.context.ApplicationContext"%>
<%@page import="org.springframework.web.context.support.WebApplicationContextUtils"%>
<%@page import="com.sms.dao.CommonDao"%>
<html>
  <head>
    <title></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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="../skins/default/main.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../dwr/interface/policeManagerDwr.js"></script>
	<script type="text/javascript" src="../dwr/interface/leaderDwr.js"></script>
	<script type="text/javascript" src="../dwr/engine.js"></script>
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript" src="../js/validator.js"></script>
	<script type="text/javascript" src="../js/vailidatorExtend.js"></script>
	<script type="text/javascript" src="../js/check.js"></script>
	<script type="text/javascript" src="station.js"></script>
	<script type="text/javascript">
	


 function selectall(v,type){
		  var f = document.forms[type+"Form"];
		  for (i=0;i<f.elements.length;i++){
			  if (f.elements[i].name==type+"s"){
				  f.elements[i].checked = v;
			  }
		  }
		  document.forms[type+"Form"].elements["clickall"+type].checked = v;
	}
	
	function openConfirm(id){
		       // mask图层
				   if(!document.getElementById('m')){ 
					   var newMask = document.createElement("div");
					   newMask.id = 'm';
					   newMask.style.position = "absolute";
					   newMask.style.zIndex = "1";
					   newMask.style.width = document.body.scrollWidth + "px";
					   newMask.style.height = document.body.scrollHeight + "px";
					   newMask.style.top = "0px";
					   newMask.style.left = "0px";
					   newMask.style.background = "#000";
					   newMask.style.filter = "alpha(opacity=40)";
					   newMask.style.opacity = "0.40";
					   document.body.appendChild(newMask);
					   document.getElementById(id).style.display="block";
				  	}
		      }
		
		function closeConfirm(id){
			document.getElementById(id).style.display="none";	
			document.body.removeChild(document.getElementById('m'));
		}
		function regist(id){

		var mids = "";
		var mnames = "";
		var obj = document.getElementsByTagName("input");
		for (i = 0; i < obj.length; i++) {
			if (obj[i].type == "checkbox" && obj[i].name == id+"s") {
				if (obj[i].checked == true) {
					var mid_name=obj[i].value;
					var mid_nametemps=mid_name.split("_");
					mids+=mid_nametemps[0]+",";
					mnames+=mid_nametemps[1]+",";
				}
			}
		}
		if (mids == "") {
			alert("\u8bf7\u9009\u62e9\u4e00\u6761\u8bb0\u5f55\u8fdb\u884c\u64cd\u4f5c\uff01");
			return;
		}

		//去掉最后一个引号
		var lastIdStr=mids.substr(mids.length-1,1);
		if(lastIdStr==","){
			mids=mids.substr(0,mids.length-1);
		}
		//去掉最后一个引号
		var lastNStr=mnames.substr(mnames.length-1,1);
		if(lastNStr==","){
			mnames=mnames.substr(0,mnames.length-1);
		}
		
		document.getElementById(id+"Submit_id").value=mids;
		document.getElementById(id+"Disp").value=mnames;
		closeConfirm(id);
	}
 }
	</script>
  </head>
  <body>
  <form id="form1" action="leader.do" method="post" onsubmit="return checkSubmit()">
	<input type="hidden" name="method" value="save" />
	<table width="100%" height="100%">
	  <tr>
	    <td class="pophead"><span></span>添加领导信息</td>
	  </tr>
	  <tr>
	    <td valign="top">
	    <div class="popbody">
	    <table class="editBlock">
	       <tr>
	        <th width="130">
	        <input type="button" value="分管工作" onclick="openConfirm('job')">
	        </th>
	        <td>
	        <input type="hidden"  id="JobSubmit_id" name="JobSubmit">
	        <textarea rows="5" cols="25" id="JobDisp" name="JobDisp"></textarea>
	        </td>
	      </tr>
	        <tr>
	        <th width="130">
	        <input type="button" value="选择秘书" onclick="openConfirm('secretary')">
	        </th>
	        <td>
	        <input type="hidden" value="" id="secretarySubmit_id" name="secretarySubmit"> 
	        <textarea rows="5" cols="25" name="secretaryDisp" id="secretaryDisp"></textarea>
	        </td>
	      </tr>
	      
	   </table>
       </div>
       </td>
      </tr>
	  <tr>
	    <td class="popfoot">
	      <input type="submit" class="inputButton" value="确定" />
	      <input type="button" class="inputButton" value="取消" onclick="history.back()" />
	    </td>
	  </tr>
	</table>
  </form>
     <!--分管工作弹出框  -->
     <div id="job" style="position: absolute; display: none; left: 30%; top: 10px; z-index: 100;  margin: auto; width:300px; height:140px;">
	   <form name="jobForm" id="jobForm" action="">
	    <table width="500px" height="300px">
		  <tr>
		    <td class="pophead"><span></span>选择分管工作</td>
		  </tr>
		  <tr>
		    <td valign="top">
		    <div class="popbody">
			    <table class="editBlock" width="100%" height="100%">
			      <tr>
			        <td valign="top">
			        	<dl class="rightBox">
			        		<dt>
			        			<input type="checkbox" id="clickalljob" onclick="selectall(this.checked,'job')"/>&nbsp;全选
			        		</dt>
				            <dd> 
							<ul > 
							<%
							for(int i=0;i<jobs.size();i++){
				        		TJobs job = jobs.get(i);
				        		%>
					            <li style="width:20%">
			                 	 <input type="checkbox" name="jobs" value="<%=job.getId()%>_<%=job.getJobName() %>" />&nbsp;<%= job.getJobName() %>
					            </li>
								<%
				        	}
				        	%>
							</ul> 
						</dd>
          				</dl>
		            </td>
			      </tr>
			    </table>
	    </div>
       </td>
      </tr>
	  <tr>
	    <td class="popfoot">
	      <input type="button" class="inputButton" value="确定" onclick="regist('job');"/>
	      <input type="button" class="inputButton" value="取消" onclick="closeConfirm('job')" />
	    </td>
	  </tr>
	</table>
	</form>
	 </div>
	 
	  <!--秘书弹出框  -->
	<div id="secretary" style="position: absolute; display: none; left: 30%; top: 10px; z-index: 100;  margin: auto; width:300px; height:140px;">
	 <form name="secretaryForm" id="secretaryForm" action="">
	    <table width="500px" height="300px">
		  <tr>
		    <td class="pophead"><span></span>选择秘书</td>
		  </tr>
		  <tr>
		    <td valign="top">
		    <div class="popbody">
			    <table class="editBlock" width="100%" height="100%">
			      <tr>
			        <td valign="top">
			        	<dl class="rightBox">
			        		<dt>
			        			<input type="checkbox" name="clickallsecretary" onclick="selectall(this.checked,'secretary')"/>&nbsp;全选
			        		</dt>
				            <dd> 
							<ul > 
							<%
				        	for(int i=0;i<secretarys.size();i++){
				        		TSecretary secretary = secretarys.get(i);
				        	%>
					            <li style="width:20%">
			                 	 <input type="checkbox" name="secretarys" value="<%=secretary.getId()%>_<%= secretary.getSecretaryName()%>" />&nbsp;<%= secretary.getSecretaryName() %>
					            </li>
							<%
				        	}
				        	%>
							</ul> 
						</dd>
          				</dl>
		            </td>
			      </tr>
			    </table>
			</div>
	       </td>
	      </tr>
		  <tr>
		    <td class="popfoot">
		      <input type="button" class="inputButton" value="确定" onclick="regist('secretary');"/>
		      <input type="button" class="inputButton" value="取消" onclick="closeConfirm('secretary')"/>
		    </td>
		  </tr>
		</table>
	  </form>
	</div>

  </body>
</html>