弹出框的实现（层）
?
下面给大家一个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 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 value="确定" /> <input type="button" 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 width="100%" height="100%"> <tr> <td valign="top"> <dl id="clickalljob" onclick="selectall(this.checked,'job')"/> 全选 </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() %>" /> <%= job.getJobName() %> </li><% } %></ul> </dd> </dl> </td> </tr> </table> </div> </td> </tr> <tr> <td value="确定" onclick="regist('job');"/> <input type="button" 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 width="100%" height="100%"> <tr> <td valign="top"> <dl name="clickallsecretary" onclick="selectall(this.checked,'secretary')"/> 全选 </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()%>" /> <%= secretary.getSecretaryName() %> </li><% } %></ul> </dd> </dl> </td> </tr> </table></div> </td> </tr> <tr> <td value="确定" onclick="regist('secretary');"/> <input type="button" value="取消" onclick="closeConfirm('secretary')"/> </td> </tr></table> </form></div> </body></html>