`
wxqhbw2008
  • 浏览: 18692 次
  • 性别: Icon_minigender_2
  • 来自: 重庆
社区版块
存档分类
最新评论

弹出框的实现(层)

    博客分类:
  • 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>
分享到:
评论

相关推荐

    一个简易的弹出框的框架,实现各种弹出层

    本项目提供了一个简易的弹出框框架,名为"layer-v1.6.0",它能够帮助开发者轻松地实现各种类型的弹出层,满足不同场景的需求。 首先,我们要理解什么是弹出层和对话框。弹出层通常是指在网页或应用程序主界面之上...

    泽元div 弹出层,弹出框

    在网页设计和开发中,"泽元div 弹出层,弹出框"是一个常见的功能需求,用于显示一些额外的信息或者交互元素,如警告、确认对话框、表单填写等。这种技术通常涉及到HTML、CSS以及JavaScript的使用,尤其是jQuery或者...

    jQuery弹出层插件三种简单遮罩弹出框效果

    本文将深入探讨标题所提及的"jQuery弹出层插件三种简单遮罩弹出框效果",以及如何利用jQuery实现这些效果。 首先,让我们了解什么是弹出层和遮罩弹出框。弹出层(Popup Layer)是一种常见的网页交互设计,当用户...

    js弹出框弹出层

    "js弹出框弹出层"是指使用JavaScript实现的一种非模态或者模态的对话框,它可以在页面上创建一个独立的窗口,用来显示内容、进行交互。在本例中,我们关注的是ThickBox,这是一个流行的JavaScript库,专门用于创建...

    微信小程序开发 遮罩层弹出框

    在微信小程序开发中,创建一个遮罩层弹出框是常见的需求,这通常用于实现对话框、加载提示或用户交互反馈等场景。本教程将详细讲解如何在微信小程序中实现这样一个功能。 首先,我们需要理解微信小程序的基本架构。...

    可自定义的底部弹出框

    实现这样的底部弹出框,通常会用到Android开发中的GridView控件。GridView是一种可以展示多行多列数据的视图,它可以自适应不同的屏幕尺寸,自动调整每一行的列数。在这个案例中,GridView被用来展示弹出框中的每个...

    js弹出框-弹出层-拖拽-兼容

    本文将深入探讨如何使用纯JavaScript实现弹出框、弹出层以及添加拖拽功能,并确保它们在各种浏览器中的兼容性。 首先,我们来看"js弹出框"。弹出框通常是JavaScript内置的`alert()`、`prompt()`和`confirm()`函数,...

    带动画效果jQuery+CSS3实现的弹出框弹出层效果

    本文将深入探讨如何使用jQuery和CSS3来创建一个带有动画效果的弹出框弹出层,以及其核心组件和实现原理。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在本项目...

    iframe弹出框遮罩父类页面

    这通常包括两个部分:显示弹出框和遮罩层,以及关闭弹出框并移除遮罩层。当用户触发某个事件(如点击按钮)时,调用这些函数。 4. **事件处理**:确保在父页面中,如果有需要与子页面进行交互的事件,例如关闭弹出...

    弹出框样式

    在给定的标题“弹出框样式”和描述中,我们可以看出重点在于使用JavaScript(js)和jQuery(jquert)来实现弹出框的特效和可拖动功能。下面我们将深入探讨这些知识点。 首先,jQuery是一个强大的JavaScript库,它...

    伪弹出框jquery

    总结起来,"伪弹出框jquery"是一个使用jQuery实现的自定义弹出框解决方案,它允许开发者灵活地控制弹出框的内容和样式,同时提供动画效果以增强用户体验。通过分析`tc.js`中的代码,我们可以深入了解如何结合HTML、...

    弹出框设计.zip

    "动态弹出框设计.zip"这个压缩包文件显然包含了一些关于如何实现不同样式和动态效果的弹出框资源,可能是代码示例、样式表或者演示文件。以下是关于动态弹出框及其相关技术的详细解释: 动态弹出框是网页或应用中一...

    自定义 jquery 弹出框 demo1

    总结一下,"自定义jquery弹出框demo1"是一个基于HTML、CSS和jQuery实现的简单弹出层示例。它包含一个隐藏的HTML元素作为弹出框,使用CSS进行样式设计,然后使用jQuery来控制弹出框的显示和关闭。这样的弹出框可以...

    小楼axure 图文教程(八)带遮罩层的弹出框

    在本教程中,我们将学习如何使用Axure设计带遮罩层的弹出框,实现弹出框在页面上下左右滚动时保持水平和垂直居中的效果。该教程来自产品经理博客:诉客-产品经理的心声,并提供了详细的步骤指南和示例原型下载。 ...

    自定义弹出框样式 alert修改

    因此,本文将详细介绍一种方法来实现自定义样式的弹出框,不仅能够提高用户交互体验,还能更好地融入整体网站设计风格。 #### 核心概念解析 1. **HTML结构搭建**:首先需要创建两个`&lt;div&gt;`元素,一个作为遮罩层(`...

    js弹出框 javascript弹出框 div+css弹出层效果 弹出登录框

    2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or ...

    jquery弹出框

    在本项目中,"jquery弹出框"指的是利用jQuery实现的一种交互式弹出层效果,类似于QQ聊天窗口中的弹出对话框。这种弹出层允许用户自定义关闭机制,并可以调整大小、改变位置,同时附带有遮罩效果,增强了用户体验。 ...

    html弹出框

    在描述中提到,你已经用jQuery实现了一个自定义的弹出框,并且只需引入相关的CSS和JS文件,就能在页面上轻松调用这个功能。这表明你可能创建了一个自定义组件,它具有一定的可复用性和易用性。 首先,让我们来了解...

    一个半透明效果的弹出框

    弹出框的实现通常涉及到JavaScript和CSS,JavaScript用于控制弹出框的显示和隐藏,而CSS则负责样式设计。在JavaScript中,我们可以使用`document.getElementById()`选择元素,然后通过`style.display`属性切换元素的...

    JQ弹出框效果

    当弹出框出现时,页面背景会被一层半透明的遮罩覆盖,这样可以防止用户在弹出框显示时误触背景内容,将焦点集中在弹出框上。实现这个效果通常涉及到HTML、CSS以及jQuery的配合使用。 HTML负责构建页面的基本结构,...

Global site tag (gtag.js) - Google Analytics