弹出框的兑现（层）

弹出框的实现（层）
下面给大家一个JSP页面例子&lt;%@ page language="java" pageEncoding="UTF-8"%&gt;&lt;%@ page import="java.util.*,com.song.common.right.model.*" %&gt;&lt;%@ page import="com.sms.model.*" %&gt;&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;&lt;%@ page isELIgnored="false" %&gt;&lt;%ApplicationContext context = WebApplicationContextUtils.getRequiredWebApplicationContext(application);CommonDao commonDao = (CommonDao)context.getBean("commonDao");List position = (List)request.getAttribute("position");//List jobs = commonDao.findObjects(TJobs.class);List&lt;TJobs&gt; jobs = (List&lt;TJobs&gt;)request.getAttribute("jobs");List&lt;TSecretary&gt; secretarys = (List&lt;TSecretary&gt;)request.getAttribute("secretarys");%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;%@page import="org.springframework.context.ApplicationContext"%&gt;&lt;%@page import="org.springframework.web.context.support.WebApplicationContextUtils"%&gt;&lt;%@page import="com.sms.dao.CommonDao"%&gt;&lt;html&gt;  &lt;head&gt;    &lt;title&gt;&lt;/title&gt;&lt;meta http-equiv="pragma" content="no-cache"&gt;&lt;meta http-equiv="cache-control" content="no-cache"&gt;&lt;meta http-equiv="expires" content="0"&gt;&lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt;&lt;meta http-equiv="description" content="This is my page"&gt;&lt;!--&lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;--&gt;&lt;link href="../skins/default/main.css" rel="stylesheet" type="text/css" /&gt;&lt;script type="text/javascript" src="../dwr/interface/policeManagerDwr.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../dwr/interface/leaderDwr.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../dwr/engine.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../js/jquery.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../js/common.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../js/validator.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../js/vailidatorExtend.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../js/check.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="station.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"&gt; function selectall(v,type){  var f = document.forms[type+"Form"];  for (i=0;i&lt;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 &lt; 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);} }&lt;/script&gt;  &lt;/head&gt;  &lt;body&gt;  &lt;form id="form1" action="leader.do" method="post" onsubmit="return checkSubmit()"&gt;&lt;input type="hidden" name="method" value="save" /&gt;&lt;table width="100%" height="100%"&gt;  &lt;tr&gt;    &lt;td value="分管工作" onclick="openConfirm('job')"&gt;        &lt;/th&gt;        &lt;td&gt;        &lt;input type="hidden"  id="JobSubmit_id" name="JobSubmit"&gt;        &lt;textarea rows="5" cols="25" id="JobDisp" name="JobDisp"&gt;&lt;/textarea&gt;        &lt;/td&gt;      &lt;/tr&gt;        &lt;tr&gt;        &lt;th width="130"&gt;        &lt;input type="button" value="选择秘书" onclick="openConfirm('secretary')"&gt;        &lt;/th&gt;        &lt;td&gt;        &lt;input type="hidden" value="" id="secretarySubmit_id" name="secretarySubmit"&gt;         &lt;textarea rows="5" cols="25" name="secretaryDisp" id="secretaryDisp"&gt;&lt;/textarea&gt;        &lt;/td&gt;      &lt;/tr&gt;         &lt;/table&gt;       &lt;/div&gt;       &lt;/td&gt;      &lt;/tr&gt;  &lt;tr&gt;    &lt;td value="确定" /&gt;      &lt;input type="button" value="取消" onclick="history.back()" /&gt;    &lt;/td&gt;  &lt;/tr&gt;&lt;/table&gt;  &lt;/form&gt;     &lt;!--分管工作弹出框  --&gt;     &lt;div id="job" style="position: absolute; display: none; left: 30%; top: 10px; z-index: 100;  margin: auto; width:300px; height:140px;"&gt;   &lt;form name="jobForm" id="jobForm" action=""&gt;    &lt;table width="500px" height="300px"&gt;  &lt;tr&gt;    &lt;td width="100%" height="100%"&gt;      &lt;tr&gt;        &lt;td valign="top"&gt;        &lt;dl id="clickalljob" onclick="selectall(this.checked,'job')"/&gt;&nbsp;全选        &lt;/dt&gt;            &lt;dd&gt; &lt;ul &gt; &lt;%for(int i=0;i&lt;jobs.size();i++){        TJobs job = jobs.get(i);        %&gt;            &lt;li style="width:20%"&gt;                  &lt;input type="checkbox" name="jobs" value="&lt;%=job.getId()%&gt;_&lt;%=job.getJobName() %&gt;" /&gt;&nbsp;&lt;%= job.getJobName() %&gt;            &lt;/li&gt;&lt;%        }        %&gt;&lt;/ul&gt; &lt;/dd&gt;          &lt;/dl&gt;            &lt;/td&gt;      &lt;/tr&gt;    &lt;/table&gt;    &lt;/div&gt;       &lt;/td&gt;      &lt;/tr&gt;  &lt;tr&gt;    &lt;td value="确定" onclick="regist('job');"/&gt;      &lt;input type="button" value="取消" onclick="closeConfirm('job')" /&gt;    &lt;/td&gt;  &lt;/tr&gt;&lt;/table&gt;&lt;/form&gt; &lt;/div&gt;   &lt;!--秘书弹出框  --&gt;&lt;div id="secretary" style="position: absolute; display: none; left: 30%; top: 10px; z-index: 100;  margin: auto; width:300px; height:140px;"&gt; &lt;form name="secretaryForm" id="secretaryForm" action=""&gt;    &lt;table width="500px" height="300px"&gt;  &lt;tr&gt;    &lt;td width="100%" height="100%"&gt;      &lt;tr&gt;        &lt;td valign="top"&gt;        &lt;dl name="clickallsecretary" onclick="selectall(this.checked,'secretary')"/&gt;&nbsp;全选        &lt;/dt&gt;            &lt;dd&gt; &lt;ul &gt; &lt;%        for(int i=0;i&lt;secretarys.size();i++){        TSecretary secretary = secretarys.get(i);        %&gt;            &lt;li style="width:20%"&gt;                  &lt;input type="checkbox" name="secretarys" value="&lt;%=secretary.getId()%&gt;_&lt;%= secretary.getSecretaryName()%&gt;" /&gt;&nbsp;&lt;%= secretary.getSecretaryName() %&gt;            &lt;/li&gt;&lt;%        }        %&gt;&lt;/ul&gt; &lt;/dd&gt;          &lt;/dl&gt;            &lt;/td&gt;      &lt;/tr&gt;    &lt;/table&gt;&lt;/div&gt;       &lt;/td&gt;      &lt;/tr&gt;  &lt;tr&gt;    &lt;td value="确定" onclick="regist('secretary');"/&gt;      &lt;input type="button" value="取消" onclick="closeConfirm('secretary')"/&gt;    &lt;/td&gt;  &lt;/tr&gt;&lt;/table&gt;  &lt;/form&gt;&lt;/div&gt;  &lt;/body&gt;&lt;/html&gt;
弹出框的兑现（层）

热点推荐
