Jqueryダイナミックポップアップウィンドウ
5598 ワード
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> </td>
<td> </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>