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>
- 大小: 57.7 KB
分享到:
相关推荐
一款应用非常简单的jquery插件,点击放大效果,依次从上往下显示。 使用方法: 1、将两个css文件导入到网页head中 2、将html文件复制到你需要的...3、在网页的底部调用jquery库、jquery.modal.js以及site.js即可实现
jquery实现弹出窗口,兼容性比较强。
jquery弹出效果实例,展示了jquery对弹出窗口的多个实例,弹出窗口框,弹出框内弹出页面,
jquery弹出窗口
jquery点击弹出窗口特效
在页面加载后或者点击页面的某个链接时弹出一个div层,同时页面的其他地方会变灰
jquery自定义弹出窗口,功能等同window.open,可返回参数
jQuery实现弹出窗口中切换登录与注册表单
JQuery弹出窗口实例源码
jQuery实现弹出窗口城市选择特效,供大家一起共同分享学习。
jquery点击弹出登陆窗口
jquery colorbox 弹出窗口 插件 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。 通过CSS 控制外观,使用用户可以很容易重新定制外观。 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。 ...
17、Jquery支持自定义弹出窗口插件
jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件jquery弹出窗口插件...
支持拖拽的jQuery层弹出窗口.rar支持拖拽的jQuery层弹出窗口.rar支持拖拽的jQuery层弹出窗口.rar
jQuery 3D弹出窗口变换特效是一款可以使用鼠标进行互动的3D弹出窗口插件。
这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html,十分灵活。另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的...
Jquery 多种弹出窗口实例,点击其它位置窗口可以实现自动隐藏效果。很实用的例子
代码简介:jQuery点击按钮弹出窗口动画特效是一款点击事件弹出窗口特效下载。