Jquery动态弹出窗口

__SuRa丶Rain

浏览: 45104 次
性别:
来自: 火星

最近访客更多访客>>

haima2013

qq_23565683

zcjava

zc88226770

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

jquery html 动态显示div位置

frame.js

$(function(){
 
 $("#button").click(function(){
    function resize_rect()
        {
   var browserWidth=$(window).width();
   var browserHeight=$(window).height();
   var winWidth=$("#info").width();
   var winHeight=$("#info").height();
   var scrollLeft=$(window).scrollLeft();
   var scrollTop=$(window).scrollTop();
   var left =scrollLeft+(browserWidth-winWidth)/2;
   var top =scrollTop+(browserHeight-winHeight)/2;
   $("#info").css("left",left);
   $("#info").css("right",top);
        }
  window.onresize = resize_rect;
  resize_rect();
  $("#info").show();
 });
 
 $(".title img").click(function(){
  $(this).parent().parent().hide();
 });
 
 $("#submit").submit(function(){
  if(""==$("#name").val()){
   alert("姓名不能为空！");
   return false;
  }
  if(""==$("#pass").val()){
   alert("密码不能为空！");
   return false;
  }else{
   alert("恭喜你，修改成功！");
   return true;
  }
 });
});

frame.css

#main table{
	border: 1px solid black;
	width: 300px;
	background:border-collapse: collapse;
}

.window{
	background-color: gray;
	width: 250px;
	padding: 2px;
	margin: 5px;
	position: absolute;
	display:none;
}

.content{
	height:110px;
	background-color: #ffffff;
	overflow:auto;
}

.title{
	text-align: center;
	font-size: 20px;
}

.title img{
	float:right;
	width: 20px;
	height:20px;
	cursor:pointer;
}

#info{
	position: absolute; 
	visibility: visible; 
	z-index: 2000;
}

login_success.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <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="css/frame.css">
	<script type="text/javascript" src="js/jquery.js" charset="gb2312"></script>
	<script type="text/javascript" src="js/frame.js" charset="gb2312"></script>
  </head>
  
  <body>
  	<h2>登录成功，欢迎${userid}光临！</h2>
  	
  	<div id="main">
  	<table>
  		<thead>
  			<tr>
  				<th colspan="2">用户信息</th>
  			</tr>
  		</thead>
  		<tbody>
  		<tr>
  			<th>帐号:</th>
  			<td>${user.userid}</td>
  		</tr>
  		<tr>
  			<th>姓名:</th>
  			<td>${user.name}</td>
  		</tr>
  		<tr>
  			<th>密码:</th>
  			<td>${user.password}</td>
  		</tr>
  		<tr>
  			<td>&nbsp;</td>
  			<td>&nbsp;</td>
  		</tr>
  		<tr>
  			<th><div id="button"><input type="button" value="修改"/></div></th>
  			<td></td>
  		</tr>
  		</tbody>
  	</table>
  	</div>
  	
  	<div class="window" id="info">
  		<div class="title"><img alt="关闭" src="images/close.jpg">修改信息</div>
  		<div class="content">
  			<form action="updataInfo" method="post">
  			<table>
  				<tr>
  					<th>姓名:</th>
  					<td><input type="text" value="${user.name}"/></td>
  				</tr>
  				<tr>
  					<th>密码:</th>
  					<td><input type="text" value="${user.password}"/></td>
  				</tr>
  				<tr>
  					<td></td>
  					<td><input type="submit" value="保存"/><input type="reset" value="重置"/></td>
  				</tr>
  			</table>
  			</form>
		</div>
  	</div>
  	
  </body>
</html>