<%@ 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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘test.jsp‘ starting page</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">
<script type="text/javascript"
src=\‘#\‘" /jquery/jquery-1.7.2.min.js">
</script>
<style type="text/css">
/* 半透明的遮罩层 */
#overlay {
background: #000;
filter: alpha(opacity = 50); /* IE的透明度 */
opacity: 0.5; /* 透明度 */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; /* 此处的图层要大于页面 */
display: none;
}
/* 内容层 */
.MyAlertBox {
position: relative;
/*z-index设置元素的堆叠顺序 仅能在定位元素上奏效（例如 position:absolute;）*/
z-index: 200;
}
</style>
<script type="text/javascript">
/*绑定单击事件*/
$(function(){
$("#loginBtn").click(function(){
showOverlay();
adjust("loginFrame");
});
$("#overlay").click(function(){
hideOverlay();
});
//当浏览器窗口大小改变时
$(window).resize(function () {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 280;
getPosTop = screenheight / 2 - 200;
$("#loginFrame").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//当拉动滚动条时，弹出层跟着移动
$(window).scroll(function () {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 280;
getPosTop = screenheight / 2 - 200;
$("#loginFrame").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
});
/* 当前页面高度 */
function pageHeight() {
//return document.body.scrollHeight;
return window.availHeight;
}
/* 当前页面宽度 */
function pageWidth() {
//return document.body.scrollWidth;
return window.availWidth;
}
/* 显示遮罩层 */
function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());
// fadeTo第一个参数为速度，第二个为透明度
// 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
$("#overlay").fadeTo(200, 0.5);
$("#loginFrame").css("display","block");
$("#loginFrame").addClass("MyAlertBox");
}
/* 隐藏遮罩层 */
function hideOverlay() {
$("#overlay").fadeOut(200);
$("#loginFrame").css("display","none");
}
//浏览器视口的高度
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight)
|| document.body.clientHeight;
}
//浏览器视口的宽度
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth)
|| document.body.clientWidth
}
/* 浏览器垂直滚动位置 */
function scrollY() {
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/* 浏览器水平滚动位置 */
function scrollX() {
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft)
|| document.body.scrollLeft;
}
/* 定位到页面中心 */
function adjust(id) {
var w = $("#"+id).width();
var h = $("#"+id).height();
var t = scrollY() + (windowHeight() / 2) - (h / 2);
if (t < 0)
t = 0;
var l = scrollX() + (windowWidth() / 2) - (w / 2);
if (l < 0)
l = 0;
$("#"+id).css( {
left : l + ‘px‘,
top : t + ‘px‘
});
}
</script>
</head>
<body>
<input type="button" id="loginBtn" value="登录"/>
<div id="overlay">
</div>
<iframe id="loginFrame" src=\‘#\‘" %>jsp/user/login.jsp"
style="display: none; width: 535px; height: 348px; " frameborder="0" scrolling="no">
</iframe>
</body>
</html>
原文：http://jiyanle.blog.51cto.com/6932197/1357702