下面给大家一个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')"/> 全选
</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 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')"/> 全选
</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 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>
分享到：
相关推荐
2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or ...
一个简易的弹出框的框架，可以实现各种弹出层。
JS弹出框 仿腾讯登录框 javascript实现弹出层效果 一个弹出层特效，精仿腾讯，兼容当前主流浏览器。
仿分享的底部弹出框，运用gridview实现item的动态添加，可以自适应布局，简单实用
JS实现自动消息弹出框JS实现自动消息弹出框JS实现自动消息弹出框JS实现自动消息弹出框JS实现自动消息弹出框
微信小程序开发遮罩层弹出框的实现，简单实现，点击弹出遮罩，类似弹出框
android自定义弹出框的实现。 平时做项目时，感觉android自带的弹出框样式比较丑，很多应用都是自己做的弹出框，这里也试着自己做了一个。
弹出层2，可以弹出多个层，并实现数据交互，第二个收集的弹出层，插件
带动画效果jQuery+CSS3实现的弹出框弹出层效果，效果不错的JS弹出层特效，带动画效果弹出 带关闭按钮、取消按钮、确认按钮，具体确认事件，取消事件大家可以自己去完成了。
弹出框，有遮罩层，遮罩随滚动条满覆盖，弹出框随滚动条调整位置。兼容主流浏览器
一个很好的半透明效果的弹出框，可以用于窗口弹出，效果比较好。
实现效果： ...大气绿色jQuery弹出框弹出层特效代码，支持三种弹出对话框模式，即提示信息、confirm确认、 alert提示三种弹框模式，特效代码基于jQuery实现，很不错的对话框，相比ArtDialog功能弱了点。效。
js 弹出层 实现登陆框效果 适应初学者学习
文章 http://blog.csdn.net/yysyangyangyangshan/article/details/38458169
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面...
ModalLayer是一款带多种形式的模态框插件，js网页弹出框代码，支持倒计时、确认对话框、弹窗iframe等。
实现弹出网页遮罩层，可兼容IE6/IE7/IE+++等； 缩放浏览器时，内容狂始终居中； 有点小bug，在IE6下，遮罩层颜色没透明，屎黑色，等我有空完善下。
大气绿色jQuery弹出框弹出层特效代码，支持三种弹出对话框模式，即提示信息、confirm确认、 alert提示三种弹框模式，特效代码基于jQuery实现，很不错的对话框，相比ArtDialog功能弱了点。
fixPosition：设定是否弹出框随滚动条一起浮动，保持在屏幕的固定位置，默认为true dragOut：设定是否允许拖出屏幕范围，默认为false。 autoClose：设定用户点击窗口中按钮后自动关闭窗口，默认为true（设定为...
用JAVASCRIPT实现联动的弹出层窗口的效果，而且加了屏蔽层.