例子，jquery 登录窗口，窗口锁定功能。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery 登录窗口--www.jb200.com</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
#shadow
{
width:100%;
height:100%;
opacity:0.2;
filter:alpha(opacity=20);
background-color:gray;
z-index:0;
position:absolute;
left:0px;
top:0px;
display:none;
}
#login{width:220px;border:1px solid red;display:none;position:absolute; }
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $shadow;
var $login;
$(function () {
$shadow = $("#shadow");
$login = $("#login");
$("#btnshow").click(function () {
$shadow.show();
var leftpx = ($shadow.width() - $login.width()) / 2 + "px";
var toppx = ($shadow.height() - $login.height()) / 2 + "px";
$login.css({ "left": leftpx, "top": toppx });
$login.slidedown(2000);
});
$("#btncancel").click(function () {
$login.slideup(3000, function () {
$shadow.hide();
});
});
});
</script>
</head>
<body>
<input type="button" id="btnshow" value="显示登录" />
<div id="shadow"></div>
<div id="login">jquery 登录窗口，窗口锁定。
<table>
<tr>
<td align="right">用户名:</td>
<td><input type="text" id="txtusername" /></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="text" id="txtpassword" /></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" id="btnlogin" value="登录" />
<input type="button" id="btncancel" value="取消" />
</td>
</tr>
</table>
</div>
</body>
</html>